From c042faa001153eb0c1cdfd9c7375b07caa9fa920 Mon Sep 17 00:00:00 2001
From: Hawtim Zhang <hawtimzhang@gmail.com>
Date: Thu, 22 Oct 2020 21:44:34 +0800
Subject: [PATCH] feat: prettier task supported (#40)

* feat: add config to resolve path alias.

* feat: use vue-i18n for language switch

* feat: add .editorconfig for ide

* fix: add no-referrer to avoid CROB

* fix: setCookie and fix typo

* feat: integrate vue-i18n

* feat: player component i18n support

* fix: duplicate key warning in explore page

* fix: like songs number changed in library page

* fire: remove todo

* fix: same text search on enter will cause error

* fix: scrobble error params type

* feat: prettier task supported

* fix: prettier ignore config update

* fix: conflict
---
 .prettierignore                  |    4 +
 .prettierrc                      |   13 +
 babel.config.js                  |    6 +-
 package.json                     |   10 +-
 public/index.html                |   39 +-
 src/App.vue                      |    6 +-
 src/api/artist.js                |   16 +-
 src/api/playlist.js              |   18 +-
 src/assets/css/nprogress.css     |   43 +-
 src/assets/css/plyr.css          | 2379 ++++++++++++++++--------------
 src/assets/css/slider.css        |   64 +-
 src/components/ContextMenu.vue   |    2 +-
 src/components/CoverRow.vue      |   16 +-
 src/components/Navbar.vue        |   10 +-
 src/components/Player.vue        |   22 +-
 src/components/TrackList.vue     |   24 +-
 src/components/TrackListItem.vue |   15 +-
 src/locale/index.js              |    4 +-
 src/locale/lang/en.js            |   30 +-
 src/locale/lang/zh-CN.js         |   30 +-
 src/main.js                      |   10 +-
 src/registerServiceWorker.js     |   42 +-
 src/store/actions.js             |   36 +-
 src/store/index.js               |    8 +-
 src/store/initState.js           |   38 +-
 src/store/mutations.js           |   22 +-
 src/utils/common.js              |   14 +-
 src/utils/filters.js             |   13 +-
 src/utils/mediaSession.js        |    8 +-
 src/utils/request.js             |    8 +-
 src/views/album.vue              |   33 +-
 src/views/artist.vue             |   28 +-
 src/views/explore.vue            |   26 +-
 src/views/home.vue               |   30 +-
 src/views/library.vue            |   34 +-
 src/views/login.vue              |    8 +-
 src/views/loginAccount.vue       |   24 +-
 src/views/loginUsername.vue      |    6 +-
 src/views/newAlbum.vue           |    2 +-
 src/views/next.vue               |   38 +-
 src/views/playlist.vue           |   42 +-
 src/views/search.vue             |   16 +-
 vue.config.js                    |    5 +-
 yarn.lock                        |  102 +-
 44 files changed, 1827 insertions(+), 1517 deletions(-)
 create mode 100644 .prettierignore
 create mode 100644 .prettierrc

diff --git a/.prettierignore b/.prettierignore
new file mode 100644
index 0000000..2b87838
--- /dev/null
+++ b/.prettierignore
@@ -0,0 +1,4 @@
+build
+coverage
+dist
+
diff --git a/.prettierrc b/.prettierrc
new file mode 100644
index 0000000..86f82d1
--- /dev/null
+++ b/.prettierrc
@@ -0,0 +1,13 @@
+{
+  "trailingComma": "es5",
+  "tabWidth": 2,
+  "useTabs": false,
+  "semi": true,
+  "singleQuote": false,
+  "jsxSingleQuote": true,
+  "jsxBracketSameLine": false,
+  "arrowParens": "always",
+  "endOfLine": "lf",
+  "bracketSpacing": true,
+  "htmlWhitespaceSensitivity": "strict"
+}
diff --git a/babel.config.js b/babel.config.js
index e955840..162a3ea 100644
--- a/babel.config.js
+++ b/babel.config.js
@@ -1,5 +1,3 @@
 module.exports = {
-  presets: [
-    '@vue/cli-plugin-babel/preset'
-  ]
-}
+  presets: ["@vue/cli-plugin-babel/preset"],
+};
diff --git a/package.json b/package.json
index ad45210..2a6b6cb 100644
--- a/package.json
+++ b/package.json
@@ -5,7 +5,13 @@
   "scripts": {
     "serve": "vue-cli-service serve",
     "build": "vue-cli-service build",
-    "lint": "vue-cli-service lint"
+    "lint": "vue-cli-service lint",
+    "prettier": "npx prettier --write ./src"
+  },
+  "husky": {
+    "hooks": {
+      "pre-commit": "npm run prettier"
+    }
   },
   "dependencies": {
     "@sentry/browser": "^5.27.0",
@@ -19,6 +25,7 @@
     "js-cookie": "^2.2.1",
     "nprogress": "^0.2.0",
     "plyr": "^3.6.2",
+    "prettier": "2.1.2",
     "register-service-worker": "^1.7.1",
     "svg-sprite-loader": "^5.0.0",
     "vue": "^2.6.11",
@@ -38,6 +45,7 @@
     "babel-eslint": "^10.1.0",
     "eslint": "^6.7.2",
     "eslint-plugin-vue": "^6.2.2",
+    "husky": "^4.3.0",
     "sass": "^1.26.11",
     "sass-loader": "^10.0.2",
     "vue-template-compiler": "^2.6.11"
diff --git a/public/index.html b/public/index.html
index 91e96b7..193d42c 100644
--- a/public/index.html
+++ b/public/index.html
@@ -1,22 +1,23 @@
 <!DOCTYPE html>
 <html lang="en">
+  <head>
+    <meta charset="utf-8" />
+    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
+    <meta name="referrer" content="no-referrer" />
+    <meta name="viewport" content="width=device-width,initial-scale=1.0" />
+    <link rel="icon" href="<%= BASE_URL %>favicon.ico" />
+    <title><%= htmlWebpackPlugin.options.title %></title>
+  </head>
 
-<head>
-  <meta charset="utf-8">
-  <meta http-equiv="X-UA-Compatible" content="IE=edge">
-  <meta name="referrer" content="no-referrer">
-  <meta name="viewport" content="width=device-width,initial-scale=1.0">
-  <link rel="icon" href="<%= BASE_URL %>favicon.ico">
-  <title><%= htmlWebpackPlugin.options.title %></title>
-</head>
-
-<body>
-  <noscript>
-    <strong>We're sorry but <%= htmlWebpackPlugin.options.title %> doesn't work properly without JavaScript enabled.
-      Please enable it to continue.</strong>
-  </noscript>
-  <div id="app"></div>
-  <!-- built files will be auto injected -->
-</body>
-
-</html>
\ No newline at end of file
+  <body>
+    <noscript>
+      <strong
+        >We're sorry but <%= htmlWebpackPlugin.options.title %> doesn't work
+        properly without JavaScript enabled. Please enable it to
+        continue.</strong
+      >
+    </noscript>
+    <div id="app"></div>
+    <!-- built files will be auto injected -->
+  </body>
+</html>
diff --git a/src/App.vue b/src/App.vue
index 3c877ce..fdad45a 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -31,7 +31,7 @@ export default {
   components: {
     Navbar,
     Player,
-    GlobalEvents
+    GlobalEvents,
   },
   methods: {
     play(e) {
@@ -42,8 +42,8 @@ export default {
       if (event.target.tagName === "INPUT") return false;
       if (this.$route.name === "mv") return false;
       return true;
-    }
-  }
+    },
+  },
 };
 </script>
 
diff --git a/src/api/artist.js b/src/api/artist.js
index c7fcad5..259dadf 100644
--- a/src/api/artist.js
+++ b/src/api/artist.js
@@ -6,9 +6,9 @@ export function getArtist(id) {
     url: "/artists",
     method: "get",
     params: {
-      id
-    }
-  }).then(data => {
+      id,
+    },
+  }).then((data) => {
     data.hotSongs = mapTrackPlayableStatus(data.hotSongs);
     return data;
   });
@@ -21,7 +21,7 @@ export function getArtistAlbum(params) {
   return request({
     url: "/artist/album",
     method: "get",
-    params
+    params,
   });
 }
 
@@ -35,8 +35,8 @@ export function toplistOfArtists(type = null) {
     url: "/toplist/artist",
     method: "get",
     params: {
-      type
-    }
+      type,
+    },
   });
 }
 
@@ -45,7 +45,7 @@ export function artistMv(id) {
     url: "/artist/mv",
     method: "get",
     params: {
-      id
-    }
+      id,
+    },
   });
 }
diff --git a/src/api/playlist.js b/src/api/playlist.js
index b33cfce..584675d 100644
--- a/src/api/playlist.js
+++ b/src/api/playlist.js
@@ -6,7 +6,7 @@ export function recommendPlaylist(params) {
   return request({
     url: "/personalized",
     method: "get",
-    params
+    params,
   });
 }
 export function dailyRecommendPlaylist(params) {
@@ -14,7 +14,7 @@ export function dailyRecommendPlaylist(params) {
   return request({
     url: "/recommend/resource",
     method: "get",
-    params
+    params,
   });
 }
 
@@ -24,8 +24,8 @@ export function getPlaylistDetail(id, noCache = false) {
   return request({
     url: "/playlist/detail",
     method: "get",
-    params
-  }).then(data => {
+    params,
+  }).then((data) => {
     data.playlist.tracks = mapTrackPlayableStatus(data.playlist.tracks);
     return data;
   });
@@ -38,7 +38,7 @@ export function highQualityPlaylist(params) {
   return request({
     url: "/top/playlist/highquality",
     method: "get",
-    params
+    params,
   });
 }
 
@@ -50,21 +50,21 @@ export function topPlaylist(params) {
   return request({
     url: "/top/playlist",
     method: "get",
-    params
+    params,
   });
 }
 
 export function playlistCatlist() {
   return request({
     url: "/playlist/catlist",
-    method: "get"
+    method: "get",
   });
 }
 
 export function toplists() {
   return request({
     url: "/toplist",
-    method: "get"
+    method: "get",
   });
 }
 
@@ -74,6 +74,6 @@ export function subscribePlaylist(params) {
   return request({
     url: "/playlist/subscribe",
     method: "get",
-    params
+    params,
   });
 }
diff --git a/src/assets/css/nprogress.css b/src/assets/css/nprogress.css
index 48b3ffa..bed8b7f 100644
--- a/src/assets/css/nprogress.css
+++ b/src/assets/css/nprogress.css
@@ -1,41 +1,40 @@
 /* Make clicks pass-through */
 #nprogress {
-    pointer-events: none;
+  pointer-events: none;
 }
 
 #nprogress .bar {
-    background: #335eea;
+  background: #335eea;
 
-    position: fixed;
-    z-index: 1031;
-    top: 0;
-    left: 0;
+  position: fixed;
+  z-index: 1031;
+  top: 0;
+  left: 0;
 
-    width: 100%;
-    height: 2px;
+  width: 100%;
+  height: 2px;
 }
 
 /* Fancy blur effect */
 #nprogress .peg {
-    display: block;
-    position: absolute;
-    right: 0px;
-    width: 100px;
-    height: 100%;
-    box-shadow: 0 0 10px #335eea,
-    0 0 5px #335eea;
-    opacity: 1.0;
+  display: block;
+  position: absolute;
+  right: 0px;
+  width: 100px;
+  height: 100%;
+  box-shadow: 0 0 10px #335eea, 0 0 5px #335eea;
+  opacity: 1;
 
-    -webkit-transform: rotate(3deg) translate(0px, -4px);
-    -ms-transform: rotate(3deg) translate(0px, -4px);
-    transform: rotate(3deg) translate(0px, -4px);
+  -webkit-transform: rotate(3deg) translate(0px, -4px);
+  -ms-transform: rotate(3deg) translate(0px, -4px);
+  transform: rotate(3deg) translate(0px, -4px);
 }
 
 .nprogress-custom-parent {
-    overflow: hidden;
-    position: relative;
+  overflow: hidden;
+  position: relative;
 }
 
 .nprogress-custom-parent #nprogress .bar {
-    position: absolute;
+  position: absolute;
 }
diff --git a/src/assets/css/plyr.css b/src/assets/css/plyr.css
index 7bdab61..584ba89 100644
--- a/src/assets/css/plyr.css
+++ b/src/assets/css/plyr.css
@@ -1,1618 +1,1811 @@
 @keyframes plyr-progress {
-    to {
-        background-position: 25px 0;
-        background-position: var(--plyr-progress-loading-size, 25px) 0
-    }
+  to {
+    background-position: 25px 0;
+    background-position: var(--plyr-progress-loading-size, 25px) 0;
+  }
 }
 
 @keyframes plyr-popup {
-    0% {
-        opacity: .5;
-        transform: translateY(10px)
-    }
+  0% {
+    opacity: 0.5;
+    transform: translateY(10px);
+  }
 
-    to {
-        opacity: 1;
-        transform: translateY(0)
-    }
+  to {
+    opacity: 1;
+    transform: translateY(0);
+  }
 }
 
 @keyframes plyr-fade-in {
-    from {
-        opacity: 0
-    }
+  from {
+    opacity: 0;
+  }
 
-    to {
-        opacity: 1
-    }
+  to {
+    opacity: 1;
+  }
 }
 
 .plyr {
-    -moz-osx-font-smoothing: grayscale;
-    -webkit-font-smoothing: antialiased;
-    align-items: center;
-    direction: ltr;
-    display: flex;
-    flex-direction: column;
-    font-family: inherit;
-    font-family: var(--plyr-font-family, inherit);
-    font-variant-numeric: tabular-nums;
-    font-weight: 400;
-    font-weight: var(--plyr-font-weight-regular, 400);
-    height: 100%;
-    line-height: 1.7;
-    line-height: var(--plyr-line-height, 1.7);
-    max-width: 100%;
-    min-width: 200px;
-    position: relative;
-    text-shadow: none;
-    transition: box-shadow .3s ease;
-    z-index: 0;
+  -moz-osx-font-smoothing: grayscale;
+  -webkit-font-smoothing: antialiased;
+  align-items: center;
+  direction: ltr;
+  display: flex;
+  flex-direction: column;
+  font-family: inherit;
+  font-family: var(--plyr-font-family, inherit);
+  font-variant-numeric: tabular-nums;
+  font-weight: 400;
+  font-weight: var(--plyr-font-weight-regular, 400);
+  height: 100%;
+  line-height: 1.7;
+  line-height: var(--plyr-line-height, 1.7);
+  max-width: 100%;
+  min-width: 200px;
+  position: relative;
+  text-shadow: none;
+  transition: box-shadow 0.3s ease;
+  z-index: 0;
 }
 
 .plyr audio,
 .plyr iframe,
 .plyr video {
-    display: block;
-    height: 100%;
-    width: 100%
+  display: block;
+  height: 100%;
+  width: 100%;
 }
 
 .plyr button {
-    font: inherit;
-    line-height: inherit;
-    width: auto
+  font: inherit;
+  line-height: inherit;
+  width: auto;
 }
 
 .plyr:focus {
-    outline: 0
+  outline: 0;
 }
 
 .plyr--full-ui {
-    box-sizing: border-box
+  box-sizing: border-box;
 }
 
 .plyr--full-ui *,
 .plyr--full-ui ::after,
 .plyr--full-ui ::before {
-    box-sizing: inherit
+  box-sizing: inherit;
 }
 
 .plyr--full-ui a,
 .plyr--full-ui button,
 .plyr--full-ui input,
 .plyr--full-ui label {
-    touch-action: manipulation
+  touch-action: manipulation;
 }
 
 .plyr__badge {
-    background: #4a5464;
-    background: var(--plyr-badge-background, #4a5464);
-    border-radius: 2px;
-    border-radius: var(--plyr-badge-border-radius, 2px);
-    color: #fff;
-    color: var(--plyr-badge-text-color, #fff);
-    font-size: 9px;
-    font-size: var(--plyr-font-size-badge, 9px);
-    line-height: 1;
-    padding: 3px 4px
+  background: #4a5464;
+  background: var(--plyr-badge-background, #4a5464);
+  border-radius: 2px;
+  border-radius: var(--plyr-badge-border-radius, 2px);
+  color: #fff;
+  color: var(--plyr-badge-text-color, #fff);
+  font-size: 9px;
+  font-size: var(--plyr-font-size-badge, 9px);
+  line-height: 1;
+  padding: 3px 4px;
 }
 
 .plyr--full-ui ::-webkit-media-text-track-container {
-    display: none
+  display: none;
 }
 
 .plyr__captions {
-    animation: plyr-fade-in .3s ease;
-    bottom: 0;
-    display: none;
-    font-size: 13px;
-    font-size: var(--plyr-font-size-small, 13px);
-    left: 0;
-    padding: 10px;
-    padding: var(--plyr-control-spacing, 10px);
-    position: absolute;
-    text-align: center;
-    transition: transform .4s ease-in-out;
-    width: 100%
+  animation: plyr-fade-in 0.3s ease;
+  bottom: 0;
+  display: none;
+  font-size: 13px;
+  font-size: var(--plyr-font-size-small, 13px);
+  left: 0;
+  padding: 10px;
+  padding: var(--plyr-control-spacing, 10px);
+  position: absolute;
+  text-align: center;
+  transition: transform 0.4s ease-in-out;
+  width: 100%;
 }
 
 .plyr__captions span:empty {
-    display: none
+  display: none;
 }
 
-@media (min-width:480px) {
-    .plyr__captions {
-        font-size: 15px;
-        font-size: var(--plyr-font-size-base, 15px);
-        padding: calc(10px * 2);
-        padding: calc(var(--plyr-control-spacing, 10px) * 2)
-    }
+@media (min-width: 480px) {
+  .plyr__captions {
+    font-size: 15px;
+    font-size: var(--plyr-font-size-base, 15px);
+    padding: calc(10px * 2);
+    padding: calc(var(--plyr-control-spacing, 10px) * 2);
+  }
 }
 
-@media (min-width:768px) {
-    .plyr__captions {
-        font-size: 18px;
-        font-size: var(--plyr-font-size-large, 18px)
-    }
+@media (min-width: 768px) {
+  .plyr__captions {
+    font-size: 18px;
+    font-size: var(--plyr-font-size-large, 18px);
+  }
 }
 
 .plyr--captions-active .plyr__captions {
-    display: block
+  display: block;
 }
 
-.plyr:not(.plyr--hide-controls) .plyr__controls:not(:empty)~.plyr__captions {
-    transform: translateY(calc(10px * -4));
-    transform: translateY(calc(var(--plyr-control-spacing, 10px) * -4))
+.plyr:not(.plyr--hide-controls) .plyr__controls:not(:empty) ~ .plyr__captions {
+  transform: translateY(calc(10px * -4));
+  transform: translateY(calc(var(--plyr-control-spacing, 10px) * -4));
 }
 
 .plyr__caption {
-    background: rgba(0, 0, 0, .8);
-    background: var(--plyr-captions-background, rgba(0, 0, 0, .8));
-    border-radius: 2px;
-    -webkit-box-decoration-break: clone;
-    box-decoration-break: clone;
-    color: #fff;
-    color: var(--plyr-captions-text-color, #fff);
-    line-height: 185%;
-    padding: .2em .5em;
-    white-space: pre-wrap
+  background: rgba(0, 0, 0, 0.8);
+  background: var(--plyr-captions-background, rgba(0, 0, 0, 0.8));
+  border-radius: 2px;
+  -webkit-box-decoration-break: clone;
+  box-decoration-break: clone;
+  color: #fff;
+  color: var(--plyr-captions-text-color, #fff);
+  line-height: 185%;
+  padding: 0.2em 0.5em;
+  white-space: pre-wrap;
 }
 
 .plyr__caption div {
-    display: inline
+  display: inline;
 }
 
 .plyr__control {
-    background: 0 0;
-    border: 0;
-    border-radius: 3px;
-    border-radius: var(--plyr-control-radius, 3px);
-    color: inherit;
-    cursor: pointer;
-    flex-shrink: 0;
-    overflow: visible;
-    padding: calc(10px * .7);
-    padding: calc(var(--plyr-control-spacing, 10px) * .7);
-    position: relative;
-    transition: all .3s ease
+  background: 0 0;
+  border: 0;
+  border-radius: 3px;
+  border-radius: var(--plyr-control-radius, 3px);
+  color: inherit;
+  cursor: pointer;
+  flex-shrink: 0;
+  overflow: visible;
+  padding: calc(10px * 0.7);
+  padding: calc(var(--plyr-control-spacing, 10px) * 0.7);
+  position: relative;
+  transition: all 0.3s ease;
 }
 
 .plyr__control svg {
-    display: block;
-    fill: currentColor;
-    height: 18px;
-    height: var(--plyr-control-icon-size, 18px);
-    pointer-events: none;
-    width: 18px;
-    width: var(--plyr-control-icon-size, 18px)
+  display: block;
+  fill: currentColor;
+  height: 18px;
+  height: var(--plyr-control-icon-size, 18px);
+  pointer-events: none;
+  width: 18px;
+  width: var(--plyr-control-icon-size, 18px);
 }
 
 .plyr__control:focus {
-    outline: 0
+  outline: 0;
 }
 
 .plyr__control.plyr__tab-focus {
-    outline-color: #00b3ff;
-    outline-color: var(--plyr-tab-focus-color, var(--plyr-color-main, var(--plyr-color-main, #00b3ff)));
-    outline-offset: 2px;
-    outline-style: dotted;
-    outline-width: 3px
+  outline-color: #00b3ff;
+  outline-color: var(
+    --plyr-tab-focus-color,
+    var(--plyr-color-main, var(--plyr-color-main, #00b3ff))
+  );
+  outline-offset: 2px;
+  outline-style: dotted;
+  outline-width: 3px;
 }
 
 a.plyr__control {
-    text-decoration: none
+  text-decoration: none;
 }
 
 a.plyr__control::after,
 a.plyr__control::before {
-    display: none
+  display: none;
 }
 
 .plyr__control.plyr__control--pressed .icon--not-pressed,
 .plyr__control.plyr__control--pressed .label--not-pressed,
 .plyr__control:not(.plyr__control--pressed) .icon--pressed,
 .plyr__control:not(.plyr__control--pressed) .label--pressed {
-    display: none
+  display: none;
 }
 
 .plyr--full-ui ::-webkit-media-controls {
-    display: none
+  display: none;
 }
 
 .plyr__controls {
-    align-items: center;
-    display: flex;
-    justify-content: flex-end;
-    text-align: center
+  align-items: center;
+  display: flex;
+  justify-content: flex-end;
+  text-align: center;
 }
 
 .plyr__controls .plyr__progress__container {
-    flex: 1;
-    min-width: 0
+  flex: 1;
+  min-width: 0;
 }
 
 .plyr__controls .plyr__controls__item {
-    margin-left: calc(10px / 4);
-    margin-left: calc(var(--plyr-control-spacing, 10px)/ 4)
+  margin-left: calc(10px / 4);
+  margin-left: calc(var(--plyr-control-spacing, 10px) / 4);
 }
 
 .plyr__controls .plyr__controls__item:first-child {
-    margin-left: 0;
-    margin-right: auto
+  margin-left: 0;
+  margin-right: auto;
 }
 
 .plyr__controls .plyr__controls__item.plyr__progress__container {
-    padding-left: calc(10px / 4);
-    padding-left: calc(var(--plyr-control-spacing, 10px)/ 4)
+  padding-left: calc(10px / 4);
+  padding-left: calc(var(--plyr-control-spacing, 10px) / 4);
 }
 
 .plyr__controls .plyr__controls__item.plyr__time {
-    padding: 0 calc(10px / 2);
-    padding: 0 calc(var(--plyr-control-spacing, 10px)/ 2)
+  padding: 0 calc(10px / 2);
+  padding: 0 calc(var(--plyr-control-spacing, 10px) / 2);
 }
 
 .plyr__controls .plyr__controls__item.plyr__progress__container:first-child,
-.plyr__controls .plyr__controls__item.plyr__time+.plyr__time,
+.plyr__controls .plyr__controls__item.plyr__time + .plyr__time,
 .plyr__controls .plyr__controls__item.plyr__time:first-child {
-    padding-left: 0
+  padding-left: 0;
 }
 
 .plyr__controls:empty {
-    display: none
+  display: none;
 }
 
-.plyr [data-plyr=airplay],
-.plyr [data-plyr=captions],
-.plyr [data-plyr=fullscreen],
-.plyr [data-plyr=pip] {
-    display: none
+.plyr [data-plyr="airplay"],
+.plyr [data-plyr="captions"],
+.plyr [data-plyr="fullscreen"],
+.plyr [data-plyr="pip"] {
+  display: none;
 }
 
-.plyr--airplay-supported [data-plyr=airplay],
-.plyr--captions-enabled [data-plyr=captions],
-.plyr--fullscreen-enabled [data-plyr=fullscreen],
-.plyr--pip-supported [data-plyr=pip] {
-    display: inline-block
+.plyr--airplay-supported [data-plyr="airplay"],
+.plyr--captions-enabled [data-plyr="captions"],
+.plyr--fullscreen-enabled [data-plyr="fullscreen"],
+.plyr--pip-supported [data-plyr="pip"] {
+  display: inline-block;
 }
 
 .plyr__menu {
-    display: flex;
-    position: relative
+  display: flex;
+  position: relative;
 }
 
 .plyr__menu .plyr__control svg {
-    transition: transform .3s ease
+  transition: transform 0.3s ease;
 }
 
-.plyr__menu .plyr__control[aria-expanded=true] svg {
-    transform: rotate(90deg)
+.plyr__menu .plyr__control[aria-expanded="true"] svg {
+  transform: rotate(90deg);
 }
 
-.plyr__menu .plyr__control[aria-expanded=true] .plyr__tooltip {
-    display: none
+.plyr__menu .plyr__control[aria-expanded="true"] .plyr__tooltip {
+  display: none;
 }
 
 .plyr__menu__container {
-    animation: plyr-popup .2s ease;
-    background: rgba(255, 255, 255, .9);
-    background: var(--plyr-menu-background, rgba(255, 255, 255, .9));
-    border-radius: 8px;
-    bottom: 100%;
-    box-shadow: 0 1px 2px rgba(0, 0, 0, .15);
-    box-shadow: var(--plyr-menu-shadow, 0 1px 2px rgba(0, 0, 0, .15));
-    color: #4a5464;
-    color: var(--plyr-menu-color, #4a5464);
-    font-size: 15px;
-    font-size: var(--plyr-font-size-base, 15px);
-    margin-bottom: 10px;
-    position: absolute;
-    right: -3px;
-    text-align: left;
-    white-space: nowrap;
-    z-index: 3
-}
-
-.plyr__menu__container>div {
-    overflow: hidden;
-    transition: height .35s cubic-bezier(.4, 0, .2, 1), width .35s cubic-bezier(.4, 0, .2, 1)
+  animation: plyr-popup 0.2s ease;
+  background: rgba(255, 255, 255, 0.9);
+  background: var(--plyr-menu-background, rgba(255, 255, 255, 0.9));
+  border-radius: 8px;
+  bottom: 100%;
+  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.15);
+  box-shadow: var(--plyr-menu-shadow, 0 1px 2px rgba(0, 0, 0, 0.15));
+  color: #4a5464;
+  color: var(--plyr-menu-color, #4a5464);
+  font-size: 15px;
+  font-size: var(--plyr-font-size-base, 15px);
+  margin-bottom: 10px;
+  position: absolute;
+  right: -3px;
+  text-align: left;
+  white-space: nowrap;
+  z-index: 3;
+}
+
+.plyr__menu__container > div {
+  overflow: hidden;
+  transition: height 0.35s cubic-bezier(0.4, 0, 0.2, 1),
+    width 0.35s cubic-bezier(0.4, 0, 0.2, 1);
 }
 
 .plyr__menu__container::after {
-    border: 4px solid transparent;
-    border: var(--plyr-menu-arrow-size, 4px) solid transparent;
-    border-top-color: rgba(255, 255, 255, .9);
-    border-top-color: var(--plyr-menu-background, rgba(255, 255, 255, .9));
-    content: '';
-    height: 0;
-    position: absolute;
-    right: calc(((18px / 2) + calc(10px * .7)) - (4px / 2));
-    right: calc(((var(--plyr-control-icon-size, 18px)/ 2) + calc(var(--plyr-control-spacing, 10px) * .7)) - (var(--plyr-menu-arrow-size, 4px)/ 2));
-    top: 100%;
-    width: 0
+  border: 4px solid transparent;
+  border: var(--plyr-menu-arrow-size, 4px) solid transparent;
+  border-top-color: rgba(255, 255, 255, 0.9);
+  border-top-color: var(--plyr-menu-background, rgba(255, 255, 255, 0.9));
+  content: "";
+  height: 0;
+  position: absolute;
+  right: calc(((18px / 2) + calc(10px * 0.7)) - (4px / 2));
+  right: calc(
+    (
+        (var(--plyr-control-icon-size, 18px) / 2) +
+          calc(var(--plyr-control-spacing, 10px) * 0.7)
+      ) - (var(--plyr-menu-arrow-size, 4px) / 2)
+  );
+  top: 100%;
+  width: 0;
 }
 
-.plyr__menu__container [role=menu] {
-    padding: calc(10px * .7);
-    padding: calc(var(--plyr-control-spacing, 10px) * .7)
+.plyr__menu__container [role="menu"] {
+  padding: calc(10px * 0.7);
+  padding: calc(var(--plyr-control-spacing, 10px) * 0.7);
 }
 
-.plyr__menu__container [role=menuitem],
-.plyr__menu__container [role=menuitemradio] {
-    margin-top: 2px
+.plyr__menu__container [role="menuitem"],
+.plyr__menu__container [role="menuitemradio"] {
+  margin-top: 2px;
 }
 
-.plyr__menu__container [role=menuitem]:first-child,
-.plyr__menu__container [role=menuitemradio]:first-child {
-    margin-top: 0
+.plyr__menu__container [role="menuitem"]:first-child,
+.plyr__menu__container [role="menuitemradio"]:first-child {
+  margin-top: 0;
 }
 
 .plyr__menu__container .plyr__control {
-    align-items: center;
-    color: #4a5464;
-    color: var(--plyr-menu-color, #4a5464);
-    display: flex;
-    font-size: 13px;
-    font-size: var(--plyr-font-size-menu, var(--plyr-font-size-small, 13px));
-    padding-bottom: calc(calc(10px * .7)/ 1.5);
-    padding-bottom: calc(calc(var(--plyr-control-spacing, 10px) * .7)/ 1.5);
-    padding-left: calc(calc(10px * .7) * 1.5);
-    padding-left: calc(calc(var(--plyr-control-spacing, 10px) * .7) * 1.5);
-    padding-right: calc(calc(10px * .7) * 1.5);
-    padding-right: calc(calc(var(--plyr-control-spacing, 10px) * .7) * 1.5);
-    padding-top: calc(calc(10px * .7)/ 1.5);
-    padding-top: calc(calc(var(--plyr-control-spacing, 10px) * .7)/ 1.5);
-    -webkit-user-select: none;
-    -ms-user-select: none;
-    user-select: none;
-    width: 100%
-}
-
-.plyr__menu__container .plyr__control>span {
-    align-items: inherit;
-    display: flex;
-    width: 100%
+  align-items: center;
+  color: #4a5464;
+  color: var(--plyr-menu-color, #4a5464);
+  display: flex;
+  font-size: 13px;
+  font-size: var(--plyr-font-size-menu, var(--plyr-font-size-small, 13px));
+  padding-bottom: calc(calc(10px * 0.7) / 1.5);
+  padding-bottom: calc(calc(var(--plyr-control-spacing, 10px) * 0.7) / 1.5);
+  padding-left: calc(calc(10px * 0.7) * 1.5);
+  padding-left: calc(calc(var(--plyr-control-spacing, 10px) * 0.7) * 1.5);
+  padding-right: calc(calc(10px * 0.7) * 1.5);
+  padding-right: calc(calc(var(--plyr-control-spacing, 10px) * 0.7) * 1.5);
+  padding-top: calc(calc(10px * 0.7) / 1.5);
+  padding-top: calc(calc(var(--plyr-control-spacing, 10px) * 0.7) / 1.5);
+  -webkit-user-select: none;
+  -ms-user-select: none;
+  user-select: none;
+  width: 100%;
+}
+
+.plyr__menu__container .plyr__control > span {
+  align-items: inherit;
+  display: flex;
+  width: 100%;
 }
 
 .plyr__menu__container .plyr__control::after {
-    border: 4px solid transparent;
-    border: var(--plyr-menu-item-arrow-size, 4px) solid transparent;
-    content: '';
-    position: absolute;
-    top: 50%;
-    transform: translateY(-50%)
+  border: 4px solid transparent;
+  border: var(--plyr-menu-item-arrow-size, 4px) solid transparent;
+  content: "";
+  position: absolute;
+  top: 50%;
+  transform: translateY(-50%);
 }
 
 .plyr__menu__container .plyr__control--forward {
-    padding-right: calc(calc(10px * .7) * 4);
-    padding-right: calc(calc(var(--plyr-control-spacing, 10px) * .7) * 4)
+  padding-right: calc(calc(10px * 0.7) * 4);
+  padding-right: calc(calc(var(--plyr-control-spacing, 10px) * 0.7) * 4);
 }
 
 .plyr__menu__container .plyr__control--forward::after {
-    border-left-color: #728197;
-    border-left-color: var(--plyr-menu-arrow-color, #728197);
-    right: calc((calc(10px * .7) * 1.5) - 4px);
-    right: calc((calc(var(--plyr-control-spacing, 10px) * .7) * 1.5) - var(--plyr-menu-item-arrow-size, 4px))
+  border-left-color: #728197;
+  border-left-color: var(--plyr-menu-arrow-color, #728197);
+  right: calc((calc(10px * 0.7) * 1.5) - 4px);
+  right: calc(
+    (calc(var(--plyr-control-spacing, 10px) * 0.7) * 1.5) -
+      var(--plyr-menu-item-arrow-size, 4px)
+  );
 }
 
 .plyr__menu__container .plyr__control--forward.plyr__tab-focus::after,
 .plyr__menu__container .plyr__control--forward:hover::after {
-    border-left-color: currentColor
+  border-left-color: currentColor;
 }
 
 .plyr__menu__container .plyr__control--back {
-    font-weight: 400;
-    font-weight: var(--plyr-font-weight-regular, 400);
-    margin: calc(10px * .7);
-    margin: calc(var(--plyr-control-spacing, 10px) * .7);
-    margin-bottom: calc(calc(10px * .7)/ 2);
-    margin-bottom: calc(calc(var(--plyr-control-spacing, 10px) * .7)/ 2);
-    padding-left: calc(calc(10px * .7) * 4);
-    padding-left: calc(calc(var(--plyr-control-spacing, 10px) * .7) * 4);
-    position: relative;
-    width: calc(100% - (calc(10px * .7) * 2));
-    width: calc(100% - (calc(var(--plyr-control-spacing, 10px) * .7) * 2))
+  font-weight: 400;
+  font-weight: var(--plyr-font-weight-regular, 400);
+  margin: calc(10px * 0.7);
+  margin: calc(var(--plyr-control-spacing, 10px) * 0.7);
+  margin-bottom: calc(calc(10px * 0.7) / 2);
+  margin-bottom: calc(calc(var(--plyr-control-spacing, 10px) * 0.7) / 2);
+  padding-left: calc(calc(10px * 0.7) * 4);
+  padding-left: calc(calc(var(--plyr-control-spacing, 10px) * 0.7) * 4);
+  position: relative;
+  width: calc(100% - (calc(10px * 0.7) * 2));
+  width: calc(100% - (calc(var(--plyr-control-spacing, 10px) * 0.7) * 2));
 }
 
 .plyr__menu__container .plyr__control--back::after {
-    border-right-color: #728197;
-    border-right-color: var(--plyr-menu-arrow-color, #728197);
-    left: calc((calc(10px * .7) * 1.5) - 4px);
-    left: calc((calc(var(--plyr-control-spacing, 10px) * .7) * 1.5) - var(--plyr-menu-item-arrow-size, 4px))
+  border-right-color: #728197;
+  border-right-color: var(--plyr-menu-arrow-color, #728197);
+  left: calc((calc(10px * 0.7) * 1.5) - 4px);
+  left: calc(
+    (calc(var(--plyr-control-spacing, 10px) * 0.7) * 1.5) -
+      var(--plyr-menu-item-arrow-size, 4px)
+  );
 }
 
 .plyr__menu__container .plyr__control--back::before {
-    background: #dcdfe5;
-    background: var(--plyr-menu-back-border-color, #dcdfe5);
-    box-shadow: 0 1px 0 #fff;
-    box-shadow: 0 1px 0 var(--plyr-menu-back-border-shadow-color, #fff);
-    content: '';
-    height: 1px;
-    left: 0;
-    margin-top: calc(calc(10px * .7)/ 2);
-    margin-top: calc(calc(var(--plyr-control-spacing, 10px) * .7)/ 2);
-    overflow: hidden;
-    position: absolute;
-    right: 0;
-    top: 100%
+  background: #dcdfe5;
+  background: var(--plyr-menu-back-border-color, #dcdfe5);
+  box-shadow: 0 1px 0 #fff;
+  box-shadow: 0 1px 0 var(--plyr-menu-back-border-shadow-color, #fff);
+  content: "";
+  height: 1px;
+  left: 0;
+  margin-top: calc(calc(10px * 0.7) / 2);
+  margin-top: calc(calc(var(--plyr-control-spacing, 10px) * 0.7) / 2);
+  overflow: hidden;
+  position: absolute;
+  right: 0;
+  top: 100%;
 }
 
 .plyr__menu__container .plyr__control--back.plyr__tab-focus::after,
 .plyr__menu__container .plyr__control--back:hover::after {
-    border-right-color: currentColor
+  border-right-color: currentColor;
 }
 
-.plyr__menu__container .plyr__control[role=menuitemradio] {
-    padding-left: calc(10px * .7);
-    padding-left: calc(var(--plyr-control-spacing, 10px) * .7)
+.plyr__menu__container .plyr__control[role="menuitemradio"] {
+  padding-left: calc(10px * 0.7);
+  padding-left: calc(var(--plyr-control-spacing, 10px) * 0.7);
 }
 
-.plyr__menu__container .plyr__control[role=menuitemradio]::after,
-.plyr__menu__container .plyr__control[role=menuitemradio]::before {
-    border-radius: 100%
+.plyr__menu__container .plyr__control[role="menuitemradio"]::after,
+.plyr__menu__container .plyr__control[role="menuitemradio"]::before {
+  border-radius: 100%;
 }
 
-.plyr__menu__container .plyr__control[role=menuitemradio]::before {
-    background: rgba(0, 0, 0, .1);
-    content: '';
-    display: block;
-    flex-shrink: 0;
-    height: 16px;
-    margin-right: 10px;
-    margin-right: var(--plyr-control-spacing, 10px);
-    transition: all .3s ease;
-    width: 16px
+.plyr__menu__container .plyr__control[role="menuitemradio"]::before {
+  background: rgba(0, 0, 0, 0.1);
+  content: "";
+  display: block;
+  flex-shrink: 0;
+  height: 16px;
+  margin-right: 10px;
+  margin-right: var(--plyr-control-spacing, 10px);
+  transition: all 0.3s ease;
+  width: 16px;
 }
 
-.plyr__menu__container .plyr__control[role=menuitemradio]::after {
-    background: #fff;
-    border: 0;
-    height: 6px;
-    left: 12px;
-    opacity: 0;
-    top: 50%;
-    transform: translateY(-50%) scale(0);
-    transition: transform .3s ease, opacity .3s ease;
-    width: 6px
+.plyr__menu__container .plyr__control[role="menuitemradio"]::after {
+  background: #fff;
+  border: 0;
+  height: 6px;
+  left: 12px;
+  opacity: 0;
+  top: 50%;
+  transform: translateY(-50%) scale(0);
+  transition: transform 0.3s ease, opacity 0.3s ease;
+  width: 6px;
 }
 
-.plyr__menu__container .plyr__control[role=menuitemradio][aria-checked=true]::before {
-    background: #00b3ff;
-    background: var(--plyr-control-toggle-checked-background, var(--plyr-color-main, var(--plyr-color-main, #00b3ff)))
+.plyr__menu__container
+  .plyr__control[role="menuitemradio"][aria-checked="true"]::before {
+  background: #00b3ff;
+  background: var(
+    --plyr-control-toggle-checked-background,
+    var(--plyr-color-main, var(--plyr-color-main, #00b3ff))
+  );
 }
 
-.plyr__menu__container .plyr__control[role=menuitemradio][aria-checked=true]::after {
-    opacity: 1;
-    transform: translateY(-50%) scale(1)
+.plyr__menu__container
+  .plyr__control[role="menuitemradio"][aria-checked="true"]::after {
+  opacity: 1;
+  transform: translateY(-50%) scale(1);
 }
 
-.plyr__menu__container .plyr__control[role=menuitemradio].plyr__tab-focus::before,
-.plyr__menu__container .plyr__control[role=menuitemradio]:hover::before {
-    background: rgba(35, 40, 47, .1)
+.plyr__menu__container
+  .plyr__control[role="menuitemradio"].plyr__tab-focus::before,
+.plyr__menu__container .plyr__control[role="menuitemradio"]:hover::before {
+  background: rgba(35, 40, 47, 0.1);
 }
 
 .plyr__menu__container .plyr__menu__value {
-    align-items: center;
-    display: flex;
-    margin-left: auto;
-    margin-right: calc((calc(10px * .7) - 2) * -1);
-    margin-right: calc((calc(var(--plyr-control-spacing, 10px) * .7) - 2) * -1);
-    overflow: hidden;
-    padding-left: calc(calc(10px * .7) * 3.5);
-    padding-left: calc(calc(var(--plyr-control-spacing, 10px) * .7) * 3.5);
-    pointer-events: none
-}
-
-.plyr--full-ui input[type=range] {
-    -webkit-appearance: none;
-    background: 0 0;
-    border: 0;
-    border-radius: calc(13px * 2);
-    border-radius: calc(var(--plyr-range-thumb-height, 13px) * 2);
-    color: #00b3ff;
-    color: var(--plyr-range-fill-background, var(--plyr-color-main, var(--plyr-color-main, #00b3ff)));
-    display: block;
-    height: calc((3px * 2) + 13px);
-    height: calc((var(--plyr-range-thumb-active-shadow-width, 3px) * 2) + var(--plyr-range-thumb-height, 13px));
-    margin: 0;
-    padding: 0;
-    transition: box-shadow .3s ease;
-    width: 100%
-}
-
-.plyr--full-ui input[type=range]::-webkit-slider-runnable-track {
-    background: 0 0;
-    border: 0;
-    border-radius: calc(5px / 2);
-    border-radius: calc(var(--plyr-range-track-height, 5px)/ 2);
-    height: 5px;
-    height: var(--plyr-range-track-height, 5px);
-    -webkit-transition: box-shadow .3s ease;
-    transition: box-shadow .3s ease;
-    -webkit-user-select: none;
-    user-select: none;
-    background-image: linear-gradient(to right, currentColor 0, transparent 0);
-    background-image: linear-gradient(to right, currentColor var(--value, 0), transparent var(--value, 0))
-}
-
-.plyr--full-ui input[type=range]::-webkit-slider-thumb {
-    background: #fff;
-    background: var(--plyr-range-thumb-background, #fff);
-    border: 0;
-    border-radius: 50%;
-    box-shadow: 0 1px 1px rgba(35, 40, 47, .15), 0 0 0 1px rgba(35, 40, 47, .2);
-    box-shadow: var(--plyr-range-thumb-shadow, 0 1px 1px rgba(35, 40, 47, .15), 0 0 0 1px rgba(35, 40, 47, .2));
-    height: 13px;
-    height: var(--plyr-range-thumb-height, 13px);
-    position: relative;
-    -webkit-transition: all .2s ease;
-    transition: all .2s ease;
-    width: 13px;
-    width: var(--plyr-range-thumb-height, 13px);
-    -webkit-appearance: none;
-    margin-top: calc(((13px - 5px)/ 2) * -1);
-    margin-top: calc(((var(--plyr-range-thumb-height, 13px) - var(--plyr-range-track-height, 5px))/ 2) * -1)
-}
-
-.plyr--full-ui input[type=range]::-moz-range-track {
-    background: 0 0;
-    border: 0;
-    border-radius: calc(5px / 2);
-    border-radius: calc(var(--plyr-range-track-height, 5px)/ 2);
-    height: 5px;
-    height: var(--plyr-range-track-height, 5px);
-    -moz-transition: box-shadow .3s ease;
-    transition: box-shadow .3s ease;
-    user-select: none
-}
-
-.plyr--full-ui input[type=range]::-moz-range-thumb {
-    background: #fff;
-    background: var(--plyr-range-thumb-background, #fff);
-    border: 0;
-    border-radius: 50%;
-    box-shadow: 0 1px 1px rgba(35, 40, 47, .15), 0 0 0 1px rgba(35, 40, 47, .2);
-    box-shadow: var(--plyr-range-thumb-shadow, 0 1px 1px rgba(35, 40, 47, .15), 0 0 0 1px rgba(35, 40, 47, .2));
-    height: 13px;
-    height: var(--plyr-range-thumb-height, 13px);
-    position: relative;
-    -moz-transition: all .2s ease;
-    transition: all .2s ease;
-    width: 13px;
-    width: var(--plyr-range-thumb-height, 13px)
-}
-
-.plyr--full-ui input[type=range]::-moz-range-progress {
-    background: currentColor;
-    border-radius: calc(5px / 2);
-    border-radius: calc(var(--plyr-range-track-height, 5px)/ 2);
-    height: 5px;
-    height: var(--plyr-range-track-height, 5px)
-}
-
-.plyr--full-ui input[type=range]::-ms-track {
-    background: 0 0;
-    border: 0;
-    border-radius: calc(5px / 2);
-    border-radius: calc(var(--plyr-range-track-height, 5px)/ 2);
-    height: 5px;
-    height: var(--plyr-range-track-height, 5px);
-    -ms-transition: box-shadow .3s ease;
-    transition: box-shadow .3s ease;
-    -ms-user-select: none;
-    user-select: none;
-    color: transparent
-}
-
-.plyr--full-ui input[type=range]::-ms-fill-upper {
-    background: 0 0;
-    border: 0;
-    border-radius: calc(5px / 2);
-    border-radius: calc(var(--plyr-range-track-height, 5px)/ 2);
-    height: 5px;
-    height: var(--plyr-range-track-height, 5px);
-    -ms-transition: box-shadow .3s ease;
-    transition: box-shadow .3s ease;
-    -ms-user-select: none;
-    user-select: none
-}
-
-.plyr--full-ui input[type=range]::-ms-fill-lower {
-    background: 0 0;
-    border: 0;
-    border-radius: calc(5px / 2);
-    border-radius: calc(var(--plyr-range-track-height, 5px)/ 2);
-    height: 5px;
-    height: var(--plyr-range-track-height, 5px);
-    -ms-transition: box-shadow .3s ease;
-    transition: box-shadow .3s ease;
-    -ms-user-select: none;
-    user-select: none;
-    background: currentColor
-}
-
-.plyr--full-ui input[type=range]::-ms-thumb {
-    background: #fff;
-    background: var(--plyr-range-thumb-background, #fff);
-    border: 0;
-    border-radius: 50%;
-    box-shadow: 0 1px 1px rgba(35, 40, 47, .15), 0 0 0 1px rgba(35, 40, 47, .2);
-    box-shadow: var(--plyr-range-thumb-shadow, 0 1px 1px rgba(35, 40, 47, .15), 0 0 0 1px rgba(35, 40, 47, .2));
-    height: 13px;
-    height: var(--plyr-range-thumb-height, 13px);
-    position: relative;
-    -ms-transition: all .2s ease;
-    transition: all .2s ease;
-    width: 13px;
-    width: var(--plyr-range-thumb-height, 13px);
-    margin-top: 0
-}
-
-.plyr--full-ui input[type=range]::-ms-tooltip {
-    display: none
-}
-
-.plyr--full-ui input[type=range]:focus {
-    outline: 0
-}
-
-.plyr--full-ui input[type=range]::-moz-focus-outer {
-    border: 0
-}
-
-.plyr--full-ui input[type=range].plyr__tab-focus::-webkit-slider-runnable-track {
-    outline-color: #00b3ff;
-    outline-color: var(--plyr-tab-focus-color, var(--plyr-color-main, var(--plyr-color-main, #00b3ff)));
-    outline-offset: 2px;
-    outline-style: dotted;
-    outline-width: 3px
-}
-
-.plyr--full-ui input[type=range].plyr__tab-focus::-moz-range-track {
-    outline-color: #00b3ff;
-    outline-color: var(--plyr-tab-focus-color, var(--plyr-color-main, var(--plyr-color-main, #00b3ff)));
-    outline-offset: 2px;
-    outline-style: dotted;
-    outline-width: 3px
-}
-
-.plyr--full-ui input[type=range].plyr__tab-focus::-ms-track {
-    outline-color: #00b3ff;
-    outline-color: var(--plyr-tab-focus-color, var(--plyr-color-main, var(--plyr-color-main, #00b3ff)));
-    outline-offset: 2px;
-    outline-style: dotted;
-    outline-width: 3px
+  align-items: center;
+  display: flex;
+  margin-left: auto;
+  margin-right: calc((calc(10px * 0.7) - 2) * -1);
+  margin-right: calc((calc(var(--plyr-control-spacing, 10px) * 0.7) - 2) * -1);
+  overflow: hidden;
+  padding-left: calc(calc(10px * 0.7) * 3.5);
+  padding-left: calc(calc(var(--plyr-control-spacing, 10px) * 0.7) * 3.5);
+  pointer-events: none;
+}
+
+.plyr--full-ui input[type="range"] {
+  -webkit-appearance: none;
+  background: 0 0;
+  border: 0;
+  border-radius: calc(13px * 2);
+  border-radius: calc(var(--plyr-range-thumb-height, 13px) * 2);
+  color: #00b3ff;
+  color: var(
+    --plyr-range-fill-background,
+    var(--plyr-color-main, var(--plyr-color-main, #00b3ff))
+  );
+  display: block;
+  height: calc((3px * 2) + 13px);
+  height: calc(
+    (var(--plyr-range-thumb-active-shadow-width, 3px) * 2) +
+      var(--plyr-range-thumb-height, 13px)
+  );
+  margin: 0;
+  padding: 0;
+  transition: box-shadow 0.3s ease;
+  width: 100%;
+}
+
+.plyr--full-ui input[type="range"]::-webkit-slider-runnable-track {
+  background: 0 0;
+  border: 0;
+  border-radius: calc(5px / 2);
+  border-radius: calc(var(--plyr-range-track-height, 5px) / 2);
+  height: 5px;
+  height: var(--plyr-range-track-height, 5px);
+  -webkit-transition: box-shadow 0.3s ease;
+  transition: box-shadow 0.3s ease;
+  -webkit-user-select: none;
+  user-select: none;
+  background-image: linear-gradient(to right, currentColor 0, transparent 0);
+  background-image: linear-gradient(
+    to right,
+    currentColor var(--value, 0),
+    transparent var(--value, 0)
+  );
+}
+
+.plyr--full-ui input[type="range"]::-webkit-slider-thumb {
+  background: #fff;
+  background: var(--plyr-range-thumb-background, #fff);
+  border: 0;
+  border-radius: 50%;
+  box-shadow: 0 1px 1px rgba(35, 40, 47, 0.15), 0 0 0 1px rgba(35, 40, 47, 0.2);
+  box-shadow: var(
+    --plyr-range-thumb-shadow,
+    0 1px 1px rgba(35, 40, 47, 0.15),
+    0 0 0 1px rgba(35, 40, 47, 0.2)
+  );
+  height: 13px;
+  height: var(--plyr-range-thumb-height, 13px);
+  position: relative;
+  -webkit-transition: all 0.2s ease;
+  transition: all 0.2s ease;
+  width: 13px;
+  width: var(--plyr-range-thumb-height, 13px);
+  -webkit-appearance: none;
+  margin-top: calc(((13px - 5px) / 2) * -1);
+  margin-top: calc(
+    (
+        (
+            var(--plyr-range-thumb-height, 13px) -
+              var(--plyr-range-track-height, 5px)
+          ) / 2
+      ) * -1
+  );
+}
+
+.plyr--full-ui input[type="range"]::-moz-range-track {
+  background: 0 0;
+  border: 0;
+  border-radius: calc(5px / 2);
+  border-radius: calc(var(--plyr-range-track-height, 5px) / 2);
+  height: 5px;
+  height: var(--plyr-range-track-height, 5px);
+  -moz-transition: box-shadow 0.3s ease;
+  transition: box-shadow 0.3s ease;
+  user-select: none;
+}
+
+.plyr--full-ui input[type="range"]::-moz-range-thumb {
+  background: #fff;
+  background: var(--plyr-range-thumb-background, #fff);
+  border: 0;
+  border-radius: 50%;
+  box-shadow: 0 1px 1px rgba(35, 40, 47, 0.15), 0 0 0 1px rgba(35, 40, 47, 0.2);
+  box-shadow: var(
+    --plyr-range-thumb-shadow,
+    0 1px 1px rgba(35, 40, 47, 0.15),
+    0 0 0 1px rgba(35, 40, 47, 0.2)
+  );
+  height: 13px;
+  height: var(--plyr-range-thumb-height, 13px);
+  position: relative;
+  -moz-transition: all 0.2s ease;
+  transition: all 0.2s ease;
+  width: 13px;
+  width: var(--plyr-range-thumb-height, 13px);
+}
+
+.plyr--full-ui input[type="range"]::-moz-range-progress {
+  background: currentColor;
+  border-radius: calc(5px / 2);
+  border-radius: calc(var(--plyr-range-track-height, 5px) / 2);
+  height: 5px;
+  height: var(--plyr-range-track-height, 5px);
+}
+
+.plyr--full-ui input[type="range"]::-ms-track {
+  background: 0 0;
+  border: 0;
+  border-radius: calc(5px / 2);
+  border-radius: calc(var(--plyr-range-track-height, 5px) / 2);
+  height: 5px;
+  height: var(--plyr-range-track-height, 5px);
+  -ms-transition: box-shadow 0.3s ease;
+  transition: box-shadow 0.3s ease;
+  -ms-user-select: none;
+  user-select: none;
+  color: transparent;
+}
+
+.plyr--full-ui input[type="range"]::-ms-fill-upper {
+  background: 0 0;
+  border: 0;
+  border-radius: calc(5px / 2);
+  border-radius: calc(var(--plyr-range-track-height, 5px) / 2);
+  height: 5px;
+  height: var(--plyr-range-track-height, 5px);
+  -ms-transition: box-shadow 0.3s ease;
+  transition: box-shadow 0.3s ease;
+  -ms-user-select: none;
+  user-select: none;
+}
+
+.plyr--full-ui input[type="range"]::-ms-fill-lower {
+  background: 0 0;
+  border: 0;
+  border-radius: calc(5px / 2);
+  border-radius: calc(var(--plyr-range-track-height, 5px) / 2);
+  height: 5px;
+  height: var(--plyr-range-track-height, 5px);
+  -ms-transition: box-shadow 0.3s ease;
+  transition: box-shadow 0.3s ease;
+  -ms-user-select: none;
+  user-select: none;
+  background: currentColor;
+}
+
+.plyr--full-ui input[type="range"]::-ms-thumb {
+  background: #fff;
+  background: var(--plyr-range-thumb-background, #fff);
+  border: 0;
+  border-radius: 50%;
+  box-shadow: 0 1px 1px rgba(35, 40, 47, 0.15), 0 0 0 1px rgba(35, 40, 47, 0.2);
+  box-shadow: var(
+    --plyr-range-thumb-shadow,
+    0 1px 1px rgba(35, 40, 47, 0.15),
+    0 0 0 1px rgba(35, 40, 47, 0.2)
+  );
+  height: 13px;
+  height: var(--plyr-range-thumb-height, 13px);
+  position: relative;
+  -ms-transition: all 0.2s ease;
+  transition: all 0.2s ease;
+  width: 13px;
+  width: var(--plyr-range-thumb-height, 13px);
+  margin-top: 0;
+}
+
+.plyr--full-ui input[type="range"]::-ms-tooltip {
+  display: none;
+}
+
+.plyr--full-ui input[type="range"]:focus {
+  outline: 0;
+}
+
+.plyr--full-ui input[type="range"]::-moz-focus-outer {
+  border: 0;
+}
+
+.plyr--full-ui
+  input[type="range"].plyr__tab-focus::-webkit-slider-runnable-track {
+  outline-color: #00b3ff;
+  outline-color: var(
+    --plyr-tab-focus-color,
+    var(--plyr-color-main, var(--plyr-color-main, #00b3ff))
+  );
+  outline-offset: 2px;
+  outline-style: dotted;
+  outline-width: 3px;
+}
+
+.plyr--full-ui input[type="range"].plyr__tab-focus::-moz-range-track {
+  outline-color: #00b3ff;
+  outline-color: var(
+    --plyr-tab-focus-color,
+    var(--plyr-color-main, var(--plyr-color-main, #00b3ff))
+  );
+  outline-offset: 2px;
+  outline-style: dotted;
+  outline-width: 3px;
+}
+
+.plyr--full-ui input[type="range"].plyr__tab-focus::-ms-track {
+  outline-color: #00b3ff;
+  outline-color: var(
+    --plyr-tab-focus-color,
+    var(--plyr-color-main, var(--plyr-color-main, #00b3ff))
+  );
+  outline-offset: 2px;
+  outline-style: dotted;
+  outline-width: 3px;
 }
 
 .plyr__poster {
-    background-color: #000;
-    background-position: 50% 50%;
-    background-repeat: no-repeat;
-    background-size: contain;
-    height: 100%;
-    left: 0;
-    opacity: 0;
-    position: absolute;
-    top: 0;
-    transition: opacity .2s ease;
-    width: 100%;
-    z-index: 1
+  background-color: #000;
+  background-position: 50% 50%;
+  background-repeat: no-repeat;
+  background-size: contain;
+  height: 100%;
+  left: 0;
+  opacity: 0;
+  position: absolute;
+  top: 0;
+  transition: opacity 0.2s ease;
+  width: 100%;
+  z-index: 1;
 }
 
 .plyr--stopped.plyr__poster-enabled .plyr__poster {
-    opacity: 1
+  opacity: 1;
 }
 
 .plyr__time {
-    font-size: 13px;
-    font-size: var(--plyr-font-size-time, var(--plyr-font-size-small, 13px))
+  font-size: 13px;
+  font-size: var(--plyr-font-size-time, var(--plyr-font-size-small, 13px));
 }
 
-.plyr__time+.plyr__time::before {
-    content: '\2044';
-    margin-right: 10px;
-    margin-right: var(--plyr-control-spacing, 10px)
+.plyr__time + .plyr__time::before {
+  content: "\2044";
+  margin-right: 10px;
+  margin-right: var(--plyr-control-spacing, 10px);
 }
 
-@media (max-width:calc(768px - 1)) {
-    .plyr__time+.plyr__time {
-        display: none
-    }
+@media (max-width: calc(768px - 1)) {
+  .plyr__time + .plyr__time {
+    display: none;
+  }
 }
 
 .plyr__tooltip {
-    background: rgba(255, 255, 255, .9);
-    background: var(--plyr-tooltip-background, rgba(255, 255, 255, .9));
-    border-radius: 3px;
-    border-radius: var(--plyr-tooltip-radius, 3px);
-    bottom: 100%;
-    box-shadow: 0 1px 2px rgba(0, 0, 0, .15);
-    box-shadow: var(--plyr-tooltip-shadow, 0 1px 2px rgba(0, 0, 0, .15));
-    color: #4a5464;
-    color: var(--plyr-tooltip-color, #4a5464);
-    font-size: 13px;
-    font-size: var(--plyr-font-size-small, 13px);
-    font-weight: 400;
-    font-weight: var(--plyr-font-weight-regular, 400);
-    left: 50%;
-    line-height: 1.3;
-    margin-bottom: calc(calc(10px / 2) * 2);
-    margin-bottom: calc(calc(var(--plyr-control-spacing, 10px)/ 2) * 2);
-    opacity: 0;
-    padding: calc(10px / 2) calc(calc(10px / 2) * 1.5);
-    padding: calc(var(--plyr-control-spacing, 10px)/ 2) calc(calc(var(--plyr-control-spacing, 10px)/ 2) * 1.5);
-    pointer-events: none;
-    position: absolute;
-    transform: translate(-50%, 10px) scale(.8);
-    transform-origin: 50% 100%;
-    transition: transform .2s .1s ease, opacity .2s .1s ease;
-    white-space: nowrap;
-    z-index: 2
+  background: rgba(255, 255, 255, 0.9);
+  background: var(--plyr-tooltip-background, rgba(255, 255, 255, 0.9));
+  border-radius: 3px;
+  border-radius: var(--plyr-tooltip-radius, 3px);
+  bottom: 100%;
+  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.15);
+  box-shadow: var(--plyr-tooltip-shadow, 0 1px 2px rgba(0, 0, 0, 0.15));
+  color: #4a5464;
+  color: var(--plyr-tooltip-color, #4a5464);
+  font-size: 13px;
+  font-size: var(--plyr-font-size-small, 13px);
+  font-weight: 400;
+  font-weight: var(--plyr-font-weight-regular, 400);
+  left: 50%;
+  line-height: 1.3;
+  margin-bottom: calc(calc(10px / 2) * 2);
+  margin-bottom: calc(calc(var(--plyr-control-spacing, 10px) / 2) * 2);
+  opacity: 0;
+  padding: calc(10px / 2) calc(calc(10px / 2) * 1.5);
+  padding: calc(var(--plyr-control-spacing, 10px) / 2)
+    calc(calc(var(--plyr-control-spacing, 10px) / 2) * 1.5);
+  pointer-events: none;
+  position: absolute;
+  transform: translate(-50%, 10px) scale(0.8);
+  transform-origin: 50% 100%;
+  transition: transform 0.2s 0.1s ease, opacity 0.2s 0.1s ease;
+  white-space: nowrap;
+  z-index: 2;
 }
 
 .plyr__tooltip::before {
-    border-left: 4px solid transparent;
-    border-left: var(--plyr-tooltip-arrow-size, 4px) solid transparent;
-    border-right: 4px solid transparent;
-    border-right: var(--plyr-tooltip-arrow-size, 4px) solid transparent;
-    border-top: 4px solid rgba(255, 255, 255, .9);
-    border-top: var(--plyr-tooltip-arrow-size, 4px) solid var(--plyr-tooltip-background, rgba(255, 255, 255, .9));
-    bottom: calc(4px * -1);
-    bottom: calc(var(--plyr-tooltip-arrow-size, 4px) * -1);
-    content: '';
-    height: 0;
-    left: 50%;
-    position: absolute;
-    transform: translateX(-50%);
-    width: 0;
-    z-index: 2
+  border-left: 4px solid transparent;
+  border-left: var(--plyr-tooltip-arrow-size, 4px) solid transparent;
+  border-right: 4px solid transparent;
+  border-right: var(--plyr-tooltip-arrow-size, 4px) solid transparent;
+  border-top: 4px solid rgba(255, 255, 255, 0.9);
+  border-top: var(--plyr-tooltip-arrow-size, 4px) solid
+    var(--plyr-tooltip-background, rgba(255, 255, 255, 0.9));
+  bottom: calc(4px * -1);
+  bottom: calc(var(--plyr-tooltip-arrow-size, 4px) * -1);
+  content: "";
+  height: 0;
+  left: 50%;
+  position: absolute;
+  transform: translateX(-50%);
+  width: 0;
+  z-index: 2;
 }
 
 .plyr .plyr__control.plyr__tab-focus .plyr__tooltip,
 .plyr .plyr__control:hover .plyr__tooltip,
 .plyr__tooltip--visible {
-    opacity: 1;
-    transform: translate(-50%, 0) scale(1)
+  opacity: 1;
+  transform: translate(-50%, 0) scale(1);
 }
 
 .plyr .plyr__control:hover .plyr__tooltip {
-    z-index: 3
-}
-
-.plyr__controls>.plyr__control:first-child .plyr__tooltip,
-.plyr__controls>.plyr__control:first-child+.plyr__control .plyr__tooltip {
-    left: 0;
-    transform: translate(0, 10px) scale(.8);
-    transform-origin: 0 100%
-}
-
-.plyr__controls>.plyr__control:first-child .plyr__tooltip::before,
-.plyr__controls>.plyr__control:first-child+.plyr__control .plyr__tooltip::before {
-    left: calc((18px / 2) + calc(10px * .7));
-    left: calc((var(--plyr-control-icon-size, 18px)/ 2) + calc(var(--plyr-control-spacing, 10px) * .7))
-}
-
-.plyr__controls>.plyr__control:last-child .plyr__tooltip {
-    left: auto;
-    right: 0;
-    transform: translate(0, 10px) scale(.8);
-    transform-origin: 100% 100%
-}
-
-.plyr__controls>.plyr__control:last-child .plyr__tooltip::before {
-    left: auto;
-    right: calc((18px / 2) + calc(10px * .7));
-    right: calc((var(--plyr-control-icon-size, 18px)/ 2) + calc(var(--plyr-control-spacing, 10px) * .7));
-    transform: translateX(50%)
-}
-
-.plyr__controls>.plyr__control:first-child .plyr__tooltip--visible,
-.plyr__controls>.plyr__control:first-child+.plyr__control .plyr__tooltip--visible,
-.plyr__controls>.plyr__control:first-child+.plyr__control.plyr__tab-focus .plyr__tooltip,
-.plyr__controls>.plyr__control:first-child+.plyr__control:hover .plyr__tooltip,
-.plyr__controls>.plyr__control:first-child.plyr__tab-focus .plyr__tooltip,
-.plyr__controls>.plyr__control:first-child:hover .plyr__tooltip,
-.plyr__controls>.plyr__control:last-child .plyr__tooltip--visible,
-.plyr__controls>.plyr__control:last-child.plyr__tab-focus .plyr__tooltip,
-.plyr__controls>.plyr__control:last-child:hover .plyr__tooltip {
-    transform: translate(0, 0) scale(1)
+  z-index: 3;
+}
+
+.plyr__controls > .plyr__control:first-child .plyr__tooltip,
+.plyr__controls > .plyr__control:first-child + .plyr__control .plyr__tooltip {
+  left: 0;
+  transform: translate(0, 10px) scale(0.8);
+  transform-origin: 0 100%;
+}
+
+.plyr__controls > .plyr__control:first-child .plyr__tooltip::before,
+.plyr__controls
+  > .plyr__control:first-child
+  + .plyr__control
+  .plyr__tooltip::before {
+  left: calc((18px / 2) + calc(10px * 0.7));
+  left: calc(
+    (var(--plyr-control-icon-size, 18px) / 2) +
+      calc(var(--plyr-control-spacing, 10px) * 0.7)
+  );
+}
+
+.plyr__controls > .plyr__control:last-child .plyr__tooltip {
+  left: auto;
+  right: 0;
+  transform: translate(0, 10px) scale(0.8);
+  transform-origin: 100% 100%;
+}
+
+.plyr__controls > .plyr__control:last-child .plyr__tooltip::before {
+  left: auto;
+  right: calc((18px / 2) + calc(10px * 0.7));
+  right: calc(
+    (var(--plyr-control-icon-size, 18px) / 2) +
+      calc(var(--plyr-control-spacing, 10px) * 0.7)
+  );
+  transform: translateX(50%);
+}
+
+.plyr__controls > .plyr__control:first-child .plyr__tooltip--visible,
+.plyr__controls
+  > .plyr__control:first-child
+  + .plyr__control
+  .plyr__tooltip--visible,
+.plyr__controls
+  > .plyr__control:first-child
+  + .plyr__control.plyr__tab-focus
+  .plyr__tooltip,
+.plyr__controls
+  > .plyr__control:first-child
+  + .plyr__control:hover
+  .plyr__tooltip,
+.plyr__controls > .plyr__control:first-child.plyr__tab-focus .plyr__tooltip,
+.plyr__controls > .plyr__control:first-child:hover .plyr__tooltip,
+.plyr__controls > .plyr__control:last-child .plyr__tooltip--visible,
+.plyr__controls > .plyr__control:last-child.plyr__tab-focus .plyr__tooltip,
+.plyr__controls > .plyr__control:last-child:hover .plyr__tooltip {
+  transform: translate(0, 0) scale(1);
 }
 
 .plyr__progress {
-    left: calc(13px * .5);
-    left: calc(var(--plyr-range-thumb-height, 13px) * .5);
-    margin-right: 13px;
-    margin-right: var(--plyr-range-thumb-height, 13px);
-    position: relative
+  left: calc(13px * 0.5);
+  left: calc(var(--plyr-range-thumb-height, 13px) * 0.5);
+  margin-right: 13px;
+  margin-right: var(--plyr-range-thumb-height, 13px);
+  position: relative;
 }
 
-.plyr__progress input[type=range],
+.plyr__progress input[type="range"],
 .plyr__progress__buffer {
-    margin-left: calc(13px * -.5);
-    margin-left: calc(var(--plyr-range-thumb-height, 13px) * -.5);
-    margin-right: calc(13px * -.5);
-    margin-right: calc(var(--plyr-range-thumb-height, 13px) * -.5);
-    width: calc(100% + 13px);
-    width: calc(100% + var(--plyr-range-thumb-height, 13px))
+  margin-left: calc(13px * -0.5);
+  margin-left: calc(var(--plyr-range-thumb-height, 13px) * -0.5);
+  margin-right: calc(13px * -0.5);
+  margin-right: calc(var(--plyr-range-thumb-height, 13px) * -0.5);
+  width: calc(100% + 13px);
+  width: calc(100% + var(--plyr-range-thumb-height, 13px));
 }
 
-.plyr__progress input[type=range] {
-    position: relative;
-    z-index: 2
+.plyr__progress input[type="range"] {
+  position: relative;
+  z-index: 2;
 }
 
 .plyr__progress .plyr__tooltip {
-    font-size: 13px;
-    font-size: var(--plyr-font-size-time, var(--plyr-font-size-small, 13px));
-    left: 0
+  font-size: 13px;
+  font-size: var(--plyr-font-size-time, var(--plyr-font-size-small, 13px));
+  left: 0;
 }
 
 .plyr__progress__buffer {
-    -webkit-appearance: none;
-    background: 0 0;
-    border: 0;
-    border-radius: 100px;
-    height: 5px;
-    height: var(--plyr-range-track-height, 5px);
-    left: 0;
-    margin-top: calc((5px / 2) * -1);
-    margin-top: calc((var(--plyr-range-track-height, 5px)/ 2) * -1);
-    padding: 0;
-    position: absolute;
-    top: 50%
+  -webkit-appearance: none;
+  background: 0 0;
+  border: 0;
+  border-radius: 100px;
+  height: 5px;
+  height: var(--plyr-range-track-height, 5px);
+  left: 0;
+  margin-top: calc((5px / 2) * -1);
+  margin-top: calc((var(--plyr-range-track-height, 5px) / 2) * -1);
+  padding: 0;
+  position: absolute;
+  top: 50%;
 }
 
 .plyr__progress__buffer::-webkit-progress-bar {
-    background: 0 0
+  background: 0 0;
 }
 
 .plyr__progress__buffer::-webkit-progress-value {
-    background: currentColor;
-    border-radius: 100px;
-    min-width: 5px;
-    min-width: var(--plyr-range-track-height, 5px);
-    -webkit-transition: width .2s ease;
-    transition: width .2s ease
+  background: currentColor;
+  border-radius: 100px;
+  min-width: 5px;
+  min-width: var(--plyr-range-track-height, 5px);
+  -webkit-transition: width 0.2s ease;
+  transition: width 0.2s ease;
 }
 
 .plyr__progress__buffer::-moz-progress-bar {
-    background: currentColor;
-    border-radius: 100px;
-    min-width: 5px;
-    min-width: var(--plyr-range-track-height, 5px);
-    -moz-transition: width .2s ease;
-    transition: width .2s ease
+  background: currentColor;
+  border-radius: 100px;
+  min-width: 5px;
+  min-width: var(--plyr-range-track-height, 5px);
+  -moz-transition: width 0.2s ease;
+  transition: width 0.2s ease;
 }
 
 .plyr__progress__buffer::-ms-fill {
-    border-radius: 100px;
-    -ms-transition: width .2s ease;
-    transition: width .2s ease
+  border-radius: 100px;
+  -ms-transition: width 0.2s ease;
+  transition: width 0.2s ease;
 }
 
 .plyr--loading .plyr__progress__buffer {
-    animation: plyr-progress 1s linear infinite;
-    background-image: linear-gradient(-45deg, rgba(35, 40, 47, .6) 25%, transparent 25%, transparent 50%, rgba(35, 40, 47, .6) 50%, rgba(35, 40, 47, .6) 75%, transparent 75%, transparent);
-    background-image: linear-gradient(-45deg, var(--plyr-progress-loading-background, rgba(35, 40, 47, .6)) 25%, transparent 25%, transparent 50%, var(--plyr-progress-loading-background, rgba(35, 40, 47, .6)) 50%, var(--plyr-progress-loading-background, rgba(35, 40, 47, .6)) 75%, transparent 75%, transparent);
-    background-repeat: repeat-x;
-    background-size: 25px 25px;
-    background-size: var(--plyr-progress-loading-size, 25px) var(--plyr-progress-loading-size, 25px);
-    color: transparent
+  animation: plyr-progress 1s linear infinite;
+  background-image: linear-gradient(
+    -45deg,
+    rgba(35, 40, 47, 0.6) 25%,
+    transparent 25%,
+    transparent 50%,
+    rgba(35, 40, 47, 0.6) 50%,
+    rgba(35, 40, 47, 0.6) 75%,
+    transparent 75%,
+    transparent
+  );
+  background-image: linear-gradient(
+    -45deg,
+    var(--plyr-progress-loading-background, rgba(35, 40, 47, 0.6)) 25%,
+    transparent 25%,
+    transparent 50%,
+    var(--plyr-progress-loading-background, rgba(35, 40, 47, 0.6)) 50%,
+    var(--plyr-progress-loading-background, rgba(35, 40, 47, 0.6)) 75%,
+    transparent 75%,
+    transparent
+  );
+  background-repeat: repeat-x;
+  background-size: 25px 25px;
+  background-size: var(--plyr-progress-loading-size, 25px)
+    var(--plyr-progress-loading-size, 25px);
+  color: transparent;
 }
 
 .plyr--video.plyr--loading .plyr__progress__buffer {
-    background-color: rgba(255, 255, 255, .25);
-    background-color: var(--plyr-video-progress-buffered-background, rgba(255, 255, 255, .25))
+  background-color: rgba(255, 255, 255, 0.25);
+  background-color: var(
+    --plyr-video-progress-buffered-background,
+    rgba(255, 255, 255, 0.25)
+  );
 }
 
 .plyr--audio.plyr--loading .plyr__progress__buffer {
-    background-color: rgba(193, 200, 209, .6);
-    background-color: var(--plyr-audio-progress-buffered-background, rgba(193, 200, 209, .6))
+  background-color: rgba(193, 200, 209, 0.6);
+  background-color: var(
+    --plyr-audio-progress-buffered-background,
+    rgba(193, 200, 209, 0.6)
+  );
 }
 
 .plyr__volume {
-    align-items: center;
-    display: flex;
-    max-width: 110px;
-    min-width: 80px;
-    position: relative;
-    width: 20%
+  align-items: center;
+  display: flex;
+  max-width: 110px;
+  min-width: 80px;
+  position: relative;
+  width: 20%;
 }
 
-.plyr__volume input[type=range] {
-    margin-left: calc(10px / 2);
-    margin-left: calc(var(--plyr-control-spacing, 10px)/ 2);
-    margin-right: calc(10px / 2);
-    margin-right: calc(var(--plyr-control-spacing, 10px)/ 2);
-    position: relative;
-    z-index: 2
+.plyr__volume input[type="range"] {
+  margin-left: calc(10px / 2);
+  margin-left: calc(var(--plyr-control-spacing, 10px) / 2);
+  margin-right: calc(10px / 2);
+  margin-right: calc(var(--plyr-control-spacing, 10px) / 2);
+  position: relative;
+  z-index: 2;
 }
 
 .plyr--is-ios .plyr__volume {
-    min-width: 0;
-    width: auto
+  min-width: 0;
+  width: auto;
 }
 
 .plyr--audio {
-    display: block
+  display: block;
 }
 
 .plyr--audio .plyr__controls {
-    background: #fff;
-    background: var(--plyr-audio-controls-background, #fff);
-    border-radius: inherit;
-    color: #4a5464;
-    color: var(--plyr-audio-control-color, #4a5464);
-    padding: 10px;
-    padding: var(--plyr-control-spacing, 10px)
+  background: #fff;
+  background: var(--plyr-audio-controls-background, #fff);
+  border-radius: inherit;
+  color: #4a5464;
+  color: var(--plyr-audio-control-color, #4a5464);
+  padding: 10px;
+  padding: var(--plyr-control-spacing, 10px);
 }
 
 .plyr--audio .plyr__control.plyr__tab-focus,
 .plyr--audio .plyr__control:hover,
-.plyr--audio .plyr__control[aria-expanded=true] {
-    background: #00b3ff;
-    background: var(--plyr-audio-control-background-hover, var(--plyr-color-main, var(--plyr-color-main, #00b3ff)));
-    color: #fff;
-    color: var(--plyr-audio-control-color-hover, #fff)
-}
-
-.plyr--full-ui.plyr--audio input[type=range]::-webkit-slider-runnable-track {
-    background-color: rgba(193, 200, 209, .6);
-    background-color: var(--plyr-audio-range-track-background, var(--plyr-audio-progress-buffered-background, rgba(193, 200, 209, .6)))
-}
-
-.plyr--full-ui.plyr--audio input[type=range]::-moz-range-track {
-    background-color: rgba(193, 200, 209, .6);
-    background-color: var(--plyr-audio-range-track-background, var(--plyr-audio-progress-buffered-background, rgba(193, 200, 209, .6)))
-}
-
-.plyr--full-ui.plyr--audio input[type=range]::-ms-track {
-    background-color: rgba(193, 200, 209, .6);
-    background-color: var(--plyr-audio-range-track-background, var(--plyr-audio-progress-buffered-background, rgba(193, 200, 209, .6)))
-}
-
-.plyr--full-ui.plyr--audio input[type=range]:active::-webkit-slider-thumb {
-    box-shadow: 0 1px 1px rgba(35, 40, 47, .15), 0 0 0 1px rgba(35, 40, 47, .2), 0 0 0 3px rgba(35, 40, 47, .1);
-    box-shadow: var(--plyr-range-thumb-shadow, 0 1px 1px rgba(35, 40, 47, .15), 0 0 0 1px rgba(35, 40, 47, .2)), 0 0 0 var(--plyr-range-thumb-active-shadow-width, 3px) var(--plyr-audio-range-thumb-active-shadow-color, rgba(35, 40, 47, .1))
-}
-
-.plyr--full-ui.plyr--audio input[type=range]:active::-moz-range-thumb {
-    box-shadow: 0 1px 1px rgba(35, 40, 47, .15), 0 0 0 1px rgba(35, 40, 47, .2), 0 0 0 3px rgba(35, 40, 47, .1);
-    box-shadow: var(--plyr-range-thumb-shadow, 0 1px 1px rgba(35, 40, 47, .15), 0 0 0 1px rgba(35, 40, 47, .2)), 0 0 0 var(--plyr-range-thumb-active-shadow-width, 3px) var(--plyr-audio-range-thumb-active-shadow-color, rgba(35, 40, 47, .1))
-}
-
-.plyr--full-ui.plyr--audio input[type=range]:active::-ms-thumb {
-    box-shadow: 0 1px 1px rgba(35, 40, 47, .15), 0 0 0 1px rgba(35, 40, 47, .2), 0 0 0 3px rgba(35, 40, 47, .1);
-    box-shadow: var(--plyr-range-thumb-shadow, 0 1px 1px rgba(35, 40, 47, .15), 0 0 0 1px rgba(35, 40, 47, .2)), 0 0 0 var(--plyr-range-thumb-active-shadow-width, 3px) var(--plyr-audio-range-thumb-active-shadow-color, rgba(35, 40, 47, .1))
+.plyr--audio .plyr__control[aria-expanded="true"] {
+  background: #00b3ff;
+  background: var(
+    --plyr-audio-control-background-hover,
+    var(--plyr-color-main, var(--plyr-color-main, #00b3ff))
+  );
+  color: #fff;
+  color: var(--plyr-audio-control-color-hover, #fff);
+}
+
+.plyr--full-ui.plyr--audio input[type="range"]::-webkit-slider-runnable-track {
+  background-color: rgba(193, 200, 209, 0.6);
+  background-color: var(
+    --plyr-audio-range-track-background,
+    var(--plyr-audio-progress-buffered-background, rgba(193, 200, 209, 0.6))
+  );
+}
+
+.plyr--full-ui.plyr--audio input[type="range"]::-moz-range-track {
+  background-color: rgba(193, 200, 209, 0.6);
+  background-color: var(
+    --plyr-audio-range-track-background,
+    var(--plyr-audio-progress-buffered-background, rgba(193, 200, 209, 0.6))
+  );
+}
+
+.plyr--full-ui.plyr--audio input[type="range"]::-ms-track {
+  background-color: rgba(193, 200, 209, 0.6);
+  background-color: var(
+    --plyr-audio-range-track-background,
+    var(--plyr-audio-progress-buffered-background, rgba(193, 200, 209, 0.6))
+  );
+}
+
+.plyr--full-ui.plyr--audio input[type="range"]:active::-webkit-slider-thumb {
+  box-shadow: 0 1px 1px rgba(35, 40, 47, 0.15), 0 0 0 1px rgba(35, 40, 47, 0.2),
+    0 0 0 3px rgba(35, 40, 47, 0.1);
+  box-shadow: var(
+      --plyr-range-thumb-shadow,
+      0 1px 1px rgba(35, 40, 47, 0.15),
+      0 0 0 1px rgba(35, 40, 47, 0.2)
+    ),
+    0 0 0 var(--plyr-range-thumb-active-shadow-width, 3px)
+      var(--plyr-audio-range-thumb-active-shadow-color, rgba(35, 40, 47, 0.1));
+}
+
+.plyr--full-ui.plyr--audio input[type="range"]:active::-moz-range-thumb {
+  box-shadow: 0 1px 1px rgba(35, 40, 47, 0.15), 0 0 0 1px rgba(35, 40, 47, 0.2),
+    0 0 0 3px rgba(35, 40, 47, 0.1);
+  box-shadow: var(
+      --plyr-range-thumb-shadow,
+      0 1px 1px rgba(35, 40, 47, 0.15),
+      0 0 0 1px rgba(35, 40, 47, 0.2)
+    ),
+    0 0 0 var(--plyr-range-thumb-active-shadow-width, 3px)
+      var(--plyr-audio-range-thumb-active-shadow-color, rgba(35, 40, 47, 0.1));
+}
+
+.plyr--full-ui.plyr--audio input[type="range"]:active::-ms-thumb {
+  box-shadow: 0 1px 1px rgba(35, 40, 47, 0.15), 0 0 0 1px rgba(35, 40, 47, 0.2),
+    0 0 0 3px rgba(35, 40, 47, 0.1);
+  box-shadow: var(
+      --plyr-range-thumb-shadow,
+      0 1px 1px rgba(35, 40, 47, 0.15),
+      0 0 0 1px rgba(35, 40, 47, 0.2)
+    ),
+    0 0 0 var(--plyr-range-thumb-active-shadow-width, 3px)
+      var(--plyr-audio-range-thumb-active-shadow-color, rgba(35, 40, 47, 0.1));
 }
 
 .plyr--audio .plyr__progress__buffer {
-    color: rgba(193, 200, 209, .6);
-    color: var(--plyr-audio-progress-buffered-background, rgba(193, 200, 209, .6))
+  color: rgba(193, 200, 209, 0.6);
+  color: var(
+    --plyr-audio-progress-buffered-background,
+    rgba(193, 200, 209, 0.6)
+  );
 }
 
 .plyr--video {
-    overflow: hidden
+  overflow: hidden;
 }
 
 .plyr--video.plyr--menu-open {
-    overflow: visible
+  overflow: visible;
 }
 
 .plyr__video-wrapper {
-    height: 100%;
-    margin: auto;
-    overflow: hidden;
-    position: relative;
-    width: 100%
+  height: 100%;
+  margin: auto;
+  overflow: hidden;
+  position: relative;
+  width: 100%;
 }
 
 .plyr__video-embed,
 .plyr__video-wrapper--fixed-ratio {
-    height: 0;
-    padding-bottom: 56.25%
+  height: 0;
+  padding-bottom: 56.25%;
 }
 
 .plyr__video-embed iframe,
 .plyr__video-wrapper--fixed-ratio video {
-    border: 0;
-    left: 0;
-    position: absolute;
-    top: 0
+  border: 0;
+  left: 0;
+  position: absolute;
+  top: 0;
 }
 
-.plyr--full-ui .plyr__video-embed>.plyr__video-embed__container {
-    padding-bottom: 240%;
-    position: relative;
-    transform: translateY(-38.28125%)
+.plyr--full-ui .plyr__video-embed > .plyr__video-embed__container {
+  padding-bottom: 240%;
+  position: relative;
+  transform: translateY(-38.28125%);
 }
 
 .plyr--video .plyr__controls {
-    background: linear-gradient(rgba(0, 0, 0, 0), rgba(0, 0, 0, .75));
-    background: var(--plyr-video-controls-background, linear-gradient(rgba(0, 0, 0, 0), rgba(0, 0, 0, .75)));
-    border-bottom-left-radius: inherit;
-    border-bottom-right-radius: inherit;
-    bottom: 0;
-    color: #fff;
-    color: var(--plyr-video-control-color, #fff);
-    left: 0;
-    padding: calc(10px / 2);
-    padding: calc(var(--plyr-control-spacing, 10px)/ 2);
-    padding-top: calc(10px * 2);
-    padding-top: calc(var(--plyr-control-spacing, 10px) * 2);
-    position: absolute;
-    right: 0;
-    transition: opacity .4s ease-in-out, transform .4s ease-in-out;
-    z-index: 3
-}
-
-@media (min-width:480px) {
-    .plyr--video .plyr__controls {
-        padding: 10px;
-        padding: var(--plyr-control-spacing, 10px);
-        padding-top: calc(10px * 3.5);
-        padding-top: calc(var(--plyr-control-spacing, 10px) * 3.5)
-    }
+  background: linear-gradient(rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.75));
+  background: var(
+    --plyr-video-controls-background,
+    linear-gradient(rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.75))
+  );
+  border-bottom-left-radius: inherit;
+  border-bottom-right-radius: inherit;
+  bottom: 0;
+  color: #fff;
+  color: var(--plyr-video-control-color, #fff);
+  left: 0;
+  padding: calc(10px / 2);
+  padding: calc(var(--plyr-control-spacing, 10px) / 2);
+  padding-top: calc(10px * 2);
+  padding-top: calc(var(--plyr-control-spacing, 10px) * 2);
+  position: absolute;
+  right: 0;
+  transition: opacity 0.4s ease-in-out, transform 0.4s ease-in-out;
+  z-index: 3;
+}
+
+@media (min-width: 480px) {
+  .plyr--video .plyr__controls {
+    padding: 10px;
+    padding: var(--plyr-control-spacing, 10px);
+    padding-top: calc(10px * 3.5);
+    padding-top: calc(var(--plyr-control-spacing, 10px) * 3.5);
+  }
 }
 
 .plyr--video.plyr--hide-controls .plyr__controls {
-    opacity: 0;
-    pointer-events: none;
-    transform: translateY(100%)
+  opacity: 0;
+  pointer-events: none;
+  transform: translateY(100%);
 }
 
 .plyr--video .plyr__control.plyr__tab-focus,
 .plyr--video .plyr__control:hover,
-.plyr--video .plyr__control[aria-expanded=true] {
-    background: #00b3ff;
-    background: var(--plyr-video-control-background-hover, var(--plyr-color-main, var(--plyr-color-main, #00b3ff)));
-    color: #fff;
-    color: var(--plyr-video-control-color-hover, #fff)
+.plyr--video .plyr__control[aria-expanded="true"] {
+  background: #00b3ff;
+  background: var(
+    --plyr-video-control-background-hover,
+    var(--plyr-color-main, var(--plyr-color-main, #00b3ff))
+  );
+  color: #fff;
+  color: var(--plyr-video-control-color-hover, #fff);
 }
 
 .plyr__control--overlaid {
-    background: #00b3ff;
-    background: var(--plyr-video-control-background-hover, var(--plyr-color-main, var(--plyr-color-main, #00b3ff)));
-    border: 0;
-    border-radius: 100%;
-    color: #fff;
-    color: var(--plyr-video-control-color, #fff);
-    display: none;
-    left: 50%;
-    opacity: .9;
-    padding: calc(10px * 1.5);
-    padding: calc(var(--plyr-control-spacing, 10px) * 1.5);
-    position: absolute;
-    top: 50%;
-    transform: translate(-50%, -50%);
-    transition: .3s;
-    z-index: 2
+  background: #00b3ff;
+  background: var(
+    --plyr-video-control-background-hover,
+    var(--plyr-color-main, var(--plyr-color-main, #00b3ff))
+  );
+  border: 0;
+  border-radius: 100%;
+  color: #fff;
+  color: var(--plyr-video-control-color, #fff);
+  display: none;
+  left: 50%;
+  opacity: 0.9;
+  padding: calc(10px * 1.5);
+  padding: calc(var(--plyr-control-spacing, 10px) * 1.5);
+  position: absolute;
+  top: 50%;
+  transform: translate(-50%, -50%);
+  transition: 0.3s;
+  z-index: 2;
 }
 
 .plyr__control--overlaid svg {
-    left: 2px;
-    position: relative
+  left: 2px;
+  position: relative;
 }
 
 .plyr__control--overlaid:focus,
 .plyr__control--overlaid:hover {
-    opacity: 1
+  opacity: 1;
 }
 
 .plyr--playing .plyr__control--overlaid {
-    opacity: 0;
-    visibility: hidden
+  opacity: 0;
+  visibility: hidden;
 }
 
 .plyr--full-ui.plyr--video .plyr__control--overlaid {
-    display: block
-}
-
-.plyr--full-ui.plyr--video input[type=range]::-webkit-slider-runnable-track {
-    background-color: rgba(255, 255, 255, .25);
-    background-color: var(--plyr-video-range-track-background, var(--plyr-video-progress-buffered-background, rgba(255, 255, 255, .25)))
-}
-
-.plyr--full-ui.plyr--video input[type=range]::-moz-range-track {
-    background-color: rgba(255, 255, 255, .25);
-    background-color: var(--plyr-video-range-track-background, var(--plyr-video-progress-buffered-background, rgba(255, 255, 255, .25)))
-}
-
-.plyr--full-ui.plyr--video input[type=range]::-ms-track {
-    background-color: rgba(255, 255, 255, .25);
-    background-color: var(--plyr-video-range-track-background, var(--plyr-video-progress-buffered-background, rgba(255, 255, 255, .25)))
-}
-
-.plyr--full-ui.plyr--video input[type=range]:active::-webkit-slider-thumb {
-    box-shadow: 0 1px 1px rgba(35, 40, 47, .15), 0 0 0 1px rgba(35, 40, 47, .2), 0 0 0 3px rgba(255, 255, 255, .5);
-    box-shadow: var(--plyr-range-thumb-shadow, 0 1px 1px rgba(35, 40, 47, .15), 0 0 0 1px rgba(35, 40, 47, .2)), 0 0 0 var(--plyr-range-thumb-active-shadow-width, 3px) var(--plyr-audio-range-thumb-active-shadow-color, rgba(255, 255, 255, .5))
-}
-
-.plyr--full-ui.plyr--video input[type=range]:active::-moz-range-thumb {
-    box-shadow: 0 1px 1px rgba(35, 40, 47, .15), 0 0 0 1px rgba(35, 40, 47, .2), 0 0 0 3px rgba(255, 255, 255, .5);
-    box-shadow: var(--plyr-range-thumb-shadow, 0 1px 1px rgba(35, 40, 47, .15), 0 0 0 1px rgba(35, 40, 47, .2)), 0 0 0 var(--plyr-range-thumb-active-shadow-width, 3px) var(--plyr-audio-range-thumb-active-shadow-color, rgba(255, 255, 255, .5))
-}
-
-.plyr--full-ui.plyr--video input[type=range]:active::-ms-thumb {
-    box-shadow: 0 1px 1px rgba(35, 40, 47, .15), 0 0 0 1px rgba(35, 40, 47, .2), 0 0 0 3px rgba(255, 255, 255, .5);
-    box-shadow: var(--plyr-range-thumb-shadow, 0 1px 1px rgba(35, 40, 47, .15), 0 0 0 1px rgba(35, 40, 47, .2)), 0 0 0 var(--plyr-range-thumb-active-shadow-width, 3px) var(--plyr-audio-range-thumb-active-shadow-color, rgba(255, 255, 255, .5))
+  display: block;
+}
+
+.plyr--full-ui.plyr--video input[type="range"]::-webkit-slider-runnable-track {
+  background-color: rgba(255, 255, 255, 0.25);
+  background-color: var(
+    --plyr-video-range-track-background,
+    var(--plyr-video-progress-buffered-background, rgba(255, 255, 255, 0.25))
+  );
+}
+
+.plyr--full-ui.plyr--video input[type="range"]::-moz-range-track {
+  background-color: rgba(255, 255, 255, 0.25);
+  background-color: var(
+    --plyr-video-range-track-background,
+    var(--plyr-video-progress-buffered-background, rgba(255, 255, 255, 0.25))
+  );
+}
+
+.plyr--full-ui.plyr--video input[type="range"]::-ms-track {
+  background-color: rgba(255, 255, 255, 0.25);
+  background-color: var(
+    --plyr-video-range-track-background,
+    var(--plyr-video-progress-buffered-background, rgba(255, 255, 255, 0.25))
+  );
+}
+
+.plyr--full-ui.plyr--video input[type="range"]:active::-webkit-slider-thumb {
+  box-shadow: 0 1px 1px rgba(35, 40, 47, 0.15), 0 0 0 1px rgba(35, 40, 47, 0.2),
+    0 0 0 3px rgba(255, 255, 255, 0.5);
+  box-shadow: var(
+      --plyr-range-thumb-shadow,
+      0 1px 1px rgba(35, 40, 47, 0.15),
+      0 0 0 1px rgba(35, 40, 47, 0.2)
+    ),
+    0 0 0 var(--plyr-range-thumb-active-shadow-width, 3px)
+      var(
+        --plyr-audio-range-thumb-active-shadow-color,
+        rgba(255, 255, 255, 0.5)
+      );
+}
+
+.plyr--full-ui.plyr--video input[type="range"]:active::-moz-range-thumb {
+  box-shadow: 0 1px 1px rgba(35, 40, 47, 0.15), 0 0 0 1px rgba(35, 40, 47, 0.2),
+    0 0 0 3px rgba(255, 255, 255, 0.5);
+  box-shadow: var(
+      --plyr-range-thumb-shadow,
+      0 1px 1px rgba(35, 40, 47, 0.15),
+      0 0 0 1px rgba(35, 40, 47, 0.2)
+    ),
+    0 0 0 var(--plyr-range-thumb-active-shadow-width, 3px)
+      var(
+        --plyr-audio-range-thumb-active-shadow-color,
+        rgba(255, 255, 255, 0.5)
+      );
+}
+
+.plyr--full-ui.plyr--video input[type="range"]:active::-ms-thumb {
+  box-shadow: 0 1px 1px rgba(35, 40, 47, 0.15), 0 0 0 1px rgba(35, 40, 47, 0.2),
+    0 0 0 3px rgba(255, 255, 255, 0.5);
+  box-shadow: var(
+      --plyr-range-thumb-shadow,
+      0 1px 1px rgba(35, 40, 47, 0.15),
+      0 0 0 1px rgba(35, 40, 47, 0.2)
+    ),
+    0 0 0 var(--plyr-range-thumb-active-shadow-width, 3px)
+      var(
+        --plyr-audio-range-thumb-active-shadow-color,
+        rgba(255, 255, 255, 0.5)
+      );
 }
 
 .plyr--video .plyr__progress__buffer {
-    color: rgba(255, 255, 255, .25);
-    color: var(--plyr-video-progress-buffered-background, rgba(255, 255, 255, .25))
+  color: rgba(255, 255, 255, 0.25);
+  color: var(
+    --plyr-video-progress-buffered-background,
+    rgba(255, 255, 255, 0.25)
+  );
 }
 
 .plyr:-webkit-full-screen {
-    background: #000;
-    border-radius: 0 !important;
-    height: 100%;
-    margin: 0;
-    width: 100%
+  background: #000;
+  border-radius: 0 !important;
+  height: 100%;
+  margin: 0;
+  width: 100%;
 }
 
 .plyr:-ms-fullscreen {
-    background: #000;
-    border-radius: 0 !important;
-    height: 100%;
-    margin: 0;
-    width: 100%
+  background: #000;
+  border-radius: 0 !important;
+  height: 100%;
+  margin: 0;
+  width: 100%;
 }
 
 .plyr:fullscreen {
-    background: #000;
-    border-radius: 0 !important;
-    height: 100%;
-    margin: 0;
-    width: 100%
+  background: #000;
+  border-radius: 0 !important;
+  height: 100%;
+  margin: 0;
+  width: 100%;
 }
 
 .plyr:-webkit-full-screen video {
-    height: 100%
+  height: 100%;
 }
 
 .plyr:-ms-fullscreen video {
-    height: 100%
+  height: 100%;
 }
 
 .plyr:fullscreen video {
-    height: 100%
+  height: 100%;
 }
 
 .plyr:-webkit-full-screen .plyr__video-wrapper {
-    height: 100%;
-    position: static
+  height: 100%;
+  position: static;
 }
 
 .plyr:-ms-fullscreen .plyr__video-wrapper {
-    height: 100%;
-    position: static
+  height: 100%;
+  position: static;
 }
 
 .plyr:fullscreen .plyr__video-wrapper {
-    height: 100%;
-    position: static
+  height: 100%;
+  position: static;
 }
 
 .plyr:-webkit-full-screen.plyr--vimeo .plyr__video-wrapper {
-    height: 0;
-    position: relative
+  height: 0;
+  position: relative;
 }
 
 .plyr:-ms-fullscreen.plyr--vimeo .plyr__video-wrapper {
-    height: 0;
-    position: relative
+  height: 0;
+  position: relative;
 }
 
 .plyr:fullscreen.plyr--vimeo .plyr__video-wrapper {
-    height: 0;
-    position: relative
+  height: 0;
+  position: relative;
 }
 
 .plyr:-webkit-full-screen .plyr__control .icon--exit-fullscreen {
-    display: block
+  display: block;
 }
 
 .plyr:-ms-fullscreen .plyr__control .icon--exit-fullscreen {
-    display: block
+  display: block;
 }
 
 .plyr:fullscreen .plyr__control .icon--exit-fullscreen {
-    display: block
+  display: block;
 }
 
-.plyr:-webkit-full-screen .plyr__control .icon--exit-fullscreen+svg {
-    display: none
+.plyr:-webkit-full-screen .plyr__control .icon--exit-fullscreen + svg {
+  display: none;
 }
 
-.plyr:-ms-fullscreen .plyr__control .icon--exit-fullscreen+svg {
-    display: none
+.plyr:-ms-fullscreen .plyr__control .icon--exit-fullscreen + svg {
+  display: none;
 }
 
-.plyr:fullscreen .plyr__control .icon--exit-fullscreen+svg {
-    display: none
+.plyr:fullscreen .plyr__control .icon--exit-fullscreen + svg {
+  display: none;
 }
 
 .plyr:-webkit-full-screen.plyr--hide-controls {
-    cursor: none
+  cursor: none;
 }
 
 .plyr:-ms-fullscreen.plyr--hide-controls {
-    cursor: none
+  cursor: none;
 }
 
 .plyr:fullscreen.plyr--hide-controls {
-    cursor: none
+  cursor: none;
 }
 
-@media (min-width:1024px) {
-    .plyr:-webkit-full-screen .plyr__captions {
-        font-size: 21px;
-        font-size: var(--plyr-font-size-xlarge, 21px)
-    }
+@media (min-width: 1024px) {
+  .plyr:-webkit-full-screen .plyr__captions {
+    font-size: 21px;
+    font-size: var(--plyr-font-size-xlarge, 21px);
+  }
 
-    .plyr:-ms-fullscreen .plyr__captions {
-        font-size: 21px;
-        font-size: var(--plyr-font-size-xlarge, 21px)
-    }
+  .plyr:-ms-fullscreen .plyr__captions {
+    font-size: 21px;
+    font-size: var(--plyr-font-size-xlarge, 21px);
+  }
 
-    .plyr:fullscreen .plyr__captions {
-        font-size: 21px;
-        font-size: var(--plyr-font-size-xlarge, 21px)
-    }
+  .plyr:fullscreen .plyr__captions {
+    font-size: 21px;
+    font-size: var(--plyr-font-size-xlarge, 21px);
+  }
 }
 
 .plyr:-webkit-full-screen {
-    background: #000;
-    border-radius: 0 !important;
-    height: 100%;
-    margin: 0;
-    width: 100%
+  background: #000;
+  border-radius: 0 !important;
+  height: 100%;
+  margin: 0;
+  width: 100%;
 }
 
 .plyr:-webkit-full-screen video {
-    height: 100%
+  height: 100%;
 }
 
 .plyr:-webkit-full-screen .plyr__video-wrapper {
-    height: 100%;
-    position: static
+  height: 100%;
+  position: static;
 }
 
 .plyr:-webkit-full-screen.plyr--vimeo .plyr__video-wrapper {
-    height: 0;
-    position: relative
+  height: 0;
+  position: relative;
 }
 
 .plyr:-webkit-full-screen .plyr__control .icon--exit-fullscreen {
-    display: block
+  display: block;
 }
 
-.plyr:-webkit-full-screen .plyr__control .icon--exit-fullscreen+svg {
-    display: none
+.plyr:-webkit-full-screen .plyr__control .icon--exit-fullscreen + svg {
+  display: none;
 }
 
 .plyr:-webkit-full-screen.plyr--hide-controls {
-    cursor: none
+  cursor: none;
 }
 
-@media (min-width:1024px) {
-    .plyr:-webkit-full-screen .plyr__captions {
-        font-size: 21px;
-        font-size: var(--plyr-font-size-xlarge, 21px)
-    }
+@media (min-width: 1024px) {
+  .plyr:-webkit-full-screen .plyr__captions {
+    font-size: 21px;
+    font-size: var(--plyr-font-size-xlarge, 21px);
+  }
 }
 
 .plyr:-moz-full-screen {
-    background: #000;
-    border-radius: 0 !important;
-    height: 100%;
-    margin: 0;
-    width: 100%
+  background: #000;
+  border-radius: 0 !important;
+  height: 100%;
+  margin: 0;
+  width: 100%;
 }
 
 .plyr:-moz-full-screen video {
-    height: 100%
+  height: 100%;
 }
 
 .plyr:-moz-full-screen .plyr__video-wrapper {
-    height: 100%;
-    position: static
+  height: 100%;
+  position: static;
 }
 
 .plyr:-moz-full-screen.plyr--vimeo .plyr__video-wrapper {
-    height: 0;
-    position: relative
+  height: 0;
+  position: relative;
 }
 
 .plyr:-moz-full-screen .plyr__control .icon--exit-fullscreen {
-    display: block
+  display: block;
 }
 
-.plyr:-moz-full-screen .plyr__control .icon--exit-fullscreen+svg {
-    display: none
+.plyr:-moz-full-screen .plyr__control .icon--exit-fullscreen + svg {
+  display: none;
 }
 
 .plyr:-moz-full-screen.plyr--hide-controls {
-    cursor: none
+  cursor: none;
 }
 
-@media (min-width:1024px) {
-    .plyr:-moz-full-screen .plyr__captions {
-        font-size: 21px;
-        font-size: var(--plyr-font-size-xlarge, 21px)
-    }
+@media (min-width: 1024px) {
+  .plyr:-moz-full-screen .plyr__captions {
+    font-size: 21px;
+    font-size: var(--plyr-font-size-xlarge, 21px);
+  }
 }
 
 .plyr:-ms-fullscreen {
-    background: #000;
-    border-radius: 0 !important;
-    height: 100%;
-    margin: 0;
-    width: 100%
+  background: #000;
+  border-radius: 0 !important;
+  height: 100%;
+  margin: 0;
+  width: 100%;
 }
 
 .plyr:-ms-fullscreen video {
-    height: 100%
+  height: 100%;
 }
 
 .plyr:-ms-fullscreen .plyr__video-wrapper {
-    height: 100%;
-    position: static
+  height: 100%;
+  position: static;
 }
 
 .plyr:-ms-fullscreen.plyr--vimeo .plyr__video-wrapper {
-    height: 0;
-    position: relative
+  height: 0;
+  position: relative;
 }
 
 .plyr:-ms-fullscreen .plyr__control .icon--exit-fullscreen {
-    display: block
+  display: block;
 }
 
-.plyr:-ms-fullscreen .plyr__control .icon--exit-fullscreen+svg {
-    display: none
+.plyr:-ms-fullscreen .plyr__control .icon--exit-fullscreen + svg {
+  display: none;
 }
 
 .plyr:-ms-fullscreen.plyr--hide-controls {
-    cursor: none
+  cursor: none;
 }
 
-@media (min-width:1024px) {
-    .plyr:-ms-fullscreen .plyr__captions {
-        font-size: 21px;
-        font-size: var(--plyr-font-size-xlarge, 21px)
-    }
+@media (min-width: 1024px) {
+  .plyr:-ms-fullscreen .plyr__captions {
+    font-size: 21px;
+    font-size: var(--plyr-font-size-xlarge, 21px);
+  }
 }
 
 .plyr--fullscreen-fallback {
-    background: #000;
-    border-radius: 0 !important;
-    height: 100%;
-    margin: 0;
-    width: 100%;
-    bottom: 0;
-    display: block;
-    left: 0;
-    position: fixed;
-    right: 0;
-    top: 0;
-    z-index: 10000000
+  background: #000;
+  border-radius: 0 !important;
+  height: 100%;
+  margin: 0;
+  width: 100%;
+  bottom: 0;
+  display: block;
+  left: 0;
+  position: fixed;
+  right: 0;
+  top: 0;
+  z-index: 10000000;
 }
 
 .plyr--fullscreen-fallback video {
-    height: 100%
+  height: 100%;
 }
 
 .plyr--fullscreen-fallback .plyr__video-wrapper {
-    height: 100%;
-    position: static
+  height: 100%;
+  position: static;
 }
 
 .plyr--fullscreen-fallback.plyr--vimeo .plyr__video-wrapper {
-    height: 0;
-    position: relative
+  height: 0;
+  position: relative;
 }
 
 .plyr--fullscreen-fallback .plyr__control .icon--exit-fullscreen {
-    display: block
+  display: block;
 }
 
-.plyr--fullscreen-fallback .plyr__control .icon--exit-fullscreen+svg {
-    display: none
+.plyr--fullscreen-fallback .plyr__control .icon--exit-fullscreen + svg {
+  display: none;
 }
 
 .plyr--fullscreen-fallback.plyr--hide-controls {
-    cursor: none
+  cursor: none;
 }
 
-@media (min-width:1024px) {
-    .plyr--fullscreen-fallback .plyr__captions {
-        font-size: 21px;
-        font-size: var(--plyr-font-size-xlarge, 21px)
-    }
+@media (min-width: 1024px) {
+  .plyr--fullscreen-fallback .plyr__captions {
+    font-size: 21px;
+    font-size: var(--plyr-font-size-xlarge, 21px);
+  }
 }
 
 .plyr__ads {
-    border-radius: inherit;
-    bottom: 0;
-    cursor: pointer;
-    left: 0;
-    overflow: hidden;
-    position: absolute;
-    right: 0;
-    top: 0;
-    z-index: -1
+  border-radius: inherit;
+  bottom: 0;
+  cursor: pointer;
+  left: 0;
+  overflow: hidden;
+  position: absolute;
+  right: 0;
+  top: 0;
+  z-index: -1;
 }
 
-.plyr__ads>div,
-.plyr__ads>div iframe {
-    height: 100%;
-    position: absolute;
-    width: 100%
+.plyr__ads > div,
+.plyr__ads > div iframe {
+  height: 100%;
+  position: absolute;
+  width: 100%;
 }
 
 .plyr__ads::after {
-    background: #23282f;
-    border-radius: 2px;
-    bottom: 10px;
-    bottom: var(--plyr-control-spacing, 10px);
-    color: #fff;
-    content: attr(data-badge-text);
-    font-size: 11px;
-    padding: 2px 6px;
-    pointer-events: none;
-    position: absolute;
-    right: 10px;
-    right: var(--plyr-control-spacing, 10px);
-    z-index: 3
+  background: #23282f;
+  border-radius: 2px;
+  bottom: 10px;
+  bottom: var(--plyr-control-spacing, 10px);
+  color: #fff;
+  content: attr(data-badge-text);
+  font-size: 11px;
+  padding: 2px 6px;
+  pointer-events: none;
+  position: absolute;
+  right: 10px;
+  right: var(--plyr-control-spacing, 10px);
+  z-index: 3;
 }
 
 .plyr__ads::after:empty {
-    display: none
+  display: none;
 }
 
 .plyr__cues {
-    background: currentColor;
-    display: block;
-    height: 5px;
-    height: var(--plyr-range-track-height, 5px);
-    left: 0;
-    margin: -var(--plyr-range-track-height, 5px)/2 0 0;
-    opacity: .8;
-    position: absolute;
-    top: 50%;
-    width: 3px;
-    z-index: 3
+  background: currentColor;
+  display: block;
+  height: 5px;
+  height: var(--plyr-range-track-height, 5px);
+  left: 0;
+  margin: -var(--plyr-range-track-height, 5px) / 2 0 0;
+  opacity: 0.8;
+  position: absolute;
+  top: 50%;
+  width: 3px;
+  z-index: 3;
 }
 
 .plyr__preview-thumb {
-    background-color: rgba(255, 255, 255, .9);
-    background-color: var(--plyr-tooltip-background, rgba(255, 255, 255, .9));
-    border-radius: 3px;
-    bottom: 100%;
-    box-shadow: 0 1px 2px rgba(0, 0, 0, .15);
-    box-shadow: var(--plyr-tooltip-shadow, 0 1px 2px rgba(0, 0, 0, .15));
-    margin-bottom: calc(calc(10px / 2) * 2);
-    margin-bottom: calc(calc(var(--plyr-control-spacing, 10px)/ 2) * 2);
-    opacity: 0;
-    padding: 3px;
-    padding: var(--plyr-tooltip-radius, 3px);
-    pointer-events: none;
-    position: absolute;
-    transform: translate(0, 10px) scale(.8);
-    transform-origin: 50% 100%;
-    transition: transform .2s .1s ease, opacity .2s .1s ease;
-    z-index: 2
+  background-color: rgba(255, 255, 255, 0.9);
+  background-color: var(--plyr-tooltip-background, rgba(255, 255, 255, 0.9));
+  border-radius: 3px;
+  bottom: 100%;
+  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.15);
+  box-shadow: var(--plyr-tooltip-shadow, 0 1px 2px rgba(0, 0, 0, 0.15));
+  margin-bottom: calc(calc(10px / 2) * 2);
+  margin-bottom: calc(calc(var(--plyr-control-spacing, 10px) / 2) * 2);
+  opacity: 0;
+  padding: 3px;
+  padding: var(--plyr-tooltip-radius, 3px);
+  pointer-events: none;
+  position: absolute;
+  transform: translate(0, 10px) scale(0.8);
+  transform-origin: 50% 100%;
+  transition: transform 0.2s 0.1s ease, opacity 0.2s 0.1s ease;
+  z-index: 2;
 }
 
 .plyr__preview-thumb--is-shown {
-    opacity: 1;
-    transform: translate(0, 0) scale(1)
+  opacity: 1;
+  transform: translate(0, 0) scale(1);
 }
 
 .plyr__preview-thumb::before {
-    border-left: 4px solid transparent;
-    border-left: var(--plyr-tooltip-arrow-size, 4px) solid transparent;
-    border-right: 4px solid transparent;
-    border-right: var(--plyr-tooltip-arrow-size, 4px) solid transparent;
-    border-top: 4px solid rgba(255, 255, 255, .9);
-    border-top: var(--plyr-tooltip-arrow-size, 4px) solid var(--plyr-tooltip-background, rgba(255, 255, 255, .9));
-    bottom: calc(4px * -1);
-    bottom: calc(var(--plyr-tooltip-arrow-size, 4px) * -1);
-    content: '';
-    height: 0;
-    left: 50%;
-    position: absolute;
-    transform: translateX(-50%);
-    width: 0;
-    z-index: 2
+  border-left: 4px solid transparent;
+  border-left: var(--plyr-tooltip-arrow-size, 4px) solid transparent;
+  border-right: 4px solid transparent;
+  border-right: var(--plyr-tooltip-arrow-size, 4px) solid transparent;
+  border-top: 4px solid rgba(255, 255, 255, 0.9);
+  border-top: var(--plyr-tooltip-arrow-size, 4px) solid
+    var(--plyr-tooltip-background, rgba(255, 255, 255, 0.9));
+  bottom: calc(4px * -1);
+  bottom: calc(var(--plyr-tooltip-arrow-size, 4px) * -1);
+  content: "";
+  height: 0;
+  left: 50%;
+  position: absolute;
+  transform: translateX(-50%);
+  width: 0;
+  z-index: 2;
 }
 
 .plyr__preview-thumb__image-container {
-    background: #c1c8d1;
-    border-radius: calc(3px - 1px);
-    border-radius: calc(var(--plyr-tooltip-radius, 3px) - 1px);
-    overflow: hidden;
-    position: relative;
-    z-index: 0
+  background: #c1c8d1;
+  border-radius: calc(3px - 1px);
+  border-radius: calc(var(--plyr-tooltip-radius, 3px) - 1px);
+  overflow: hidden;
+  position: relative;
+  z-index: 0;
 }
 
 .plyr__preview-thumb__image-container img {
-    height: 100%;
-    left: 0;
-    max-height: none;
-    max-width: none;
-    position: absolute;
-    top: 0;
-    width: 100%
+  height: 100%;
+  left: 0;
+  max-height: none;
+  max-width: none;
+  position: absolute;
+  top: 0;
+  width: 100%;
 }
 
 .plyr__preview-thumb__time-container {
-    bottom: 6px;
-    left: 0;
-    position: absolute;
-    right: 0;
-    white-space: nowrap;
-    z-index: 3
+  bottom: 6px;
+  left: 0;
+  position: absolute;
+  right: 0;
+  white-space: nowrap;
+  z-index: 3;
 }
 
 .plyr__preview-thumb__time-container span {
-    background-color: rgba(0, 0, 0, .55);
-    border-radius: calc(3px - 1px);
-    border-radius: calc(var(--plyr-tooltip-radius, 3px) - 1px);
-    color: #fff;
-    font-size: 13px;
-    font-size: var(--plyr-font-size-time, var(--plyr-font-size-small, 13px));
-    padding: 3px 6px
+  background-color: rgba(0, 0, 0, 0.55);
+  border-radius: calc(3px - 1px);
+  border-radius: calc(var(--plyr-tooltip-radius, 3px) - 1px);
+  color: #fff;
+  font-size: 13px;
+  font-size: var(--plyr-font-size-time, var(--plyr-font-size-small, 13px));
+  padding: 3px 6px;
 }
 
 .plyr__preview-scrubbing {
-    bottom: 0;
-    filter: blur(1px);
-    height: 100%;
-    left: 0;
-    margin: auto;
-    opacity: 0;
-    overflow: hidden;
-    pointer-events: none;
-    position: absolute;
-    right: 0;
-    top: 0;
-    transition: opacity .3s ease;
-    width: 100%;
-    z-index: 1
+  bottom: 0;
+  filter: blur(1px);
+  height: 100%;
+  left: 0;
+  margin: auto;
+  opacity: 0;
+  overflow: hidden;
+  pointer-events: none;
+  position: absolute;
+  right: 0;
+  top: 0;
+  transition: opacity 0.3s ease;
+  width: 100%;
+  z-index: 1;
 }
 
 .plyr__preview-scrubbing--is-shown {
-    opacity: 1
+  opacity: 1;
 }
 
 .plyr__preview-scrubbing img {
-    height: 100%;
-    left: 0;
-    max-height: none;
-    max-width: none;
-    object-fit: contain;
-    position: absolute;
-    top: 0;
-    width: 100%
+  height: 100%;
+  left: 0;
+  max-height: none;
+  max-width: none;
+  object-fit: contain;
+  position: absolute;
+  top: 0;
+  width: 100%;
 }
 
 .plyr--no-transition {
-    transition: none !important
+  transition: none !important;
 }
 
 .plyr__sr-only {
-    clip: rect(1px, 1px, 1px, 1px);
-    overflow: hidden;
-    border: 0 !important;
-    height: 1px !important;
-    padding: 0 !important;
-    position: absolute !important;
-    width: 1px !important
+  clip: rect(1px, 1px, 1px, 1px);
+  overflow: hidden;
+  border: 0 !important;
+  height: 1px !important;
+  padding: 0 !important;
+  position: absolute !important;
+  width: 1px !important;
 }
 
 .plyr [hidden] {
-    display: none !important
-}
\ No newline at end of file
+  display: none !important;
+}
diff --git a/src/assets/css/slider.css b/src/assets/css/slider.css
index fb0c6cd..87a51cd 100644
--- a/src/assets/css/slider.css
+++ b/src/assets/css/slider.css
@@ -1,65 +1,63 @@
 /* rail style */
 .vue-slider-rail {
-    background-color: #eee;
-    border-radius: 15px;
+  background-color: #eee;
+  border-radius: 15px;
 }
 
 /* process style */
 .vue-slider-process {
-    background-color: #335eea;
-    border-radius: 15px;
+  background-color: #335eea;
+  border-radius: 15px;
 }
 
 /* dot style */
 .vue-slider-dot-handle {
-    cursor: pointer;
-    width: 100%;
-    height: 100%;
-    border-radius: 50%;
-    background-color: #fff;
-    box-sizing: border-box;
-    box-shadow: 0.5px 0.5px 2px 1px rgba(0, 0, 0, 0.12);
-    visibility: hidden;
+  cursor: pointer;
+  width: 100%;
+  height: 100%;
+  border-radius: 50%;
+  background-color: #fff;
+  box-sizing: border-box;
+  box-shadow: 0.5px 0.5px 2px 1px rgba(0, 0, 0, 0.12);
+  visibility: hidden;
 }
 
 /* tooltip style  */
 .vue-slider-dot-tooltip-wrapper {
-    opacity: 0;
-    transition: all 1s;
+  opacity: 0;
+  transition: all 1s;
 }
 
 .vue-slider-dot-tooltip-wrapper-show {
-    opacity: 1;
+  opacity: 1;
 }
 
 .vue-slider-dot-tooltip-inner {
-    font-size: 14px;
-    white-space: nowrap;
-    padding: 2px 6px;
-    min-width: 20px;
-    text-align: center;
-    color: #000;
-    border-radius: 5px;
-    border-color: #fff;
-    background-color: #fff;
-    box-sizing: content-box;
-    box-shadow: 0.5px 0.5px 2px 1px rgba(0, 0, 0, 0.08);
+  font-size: 14px;
+  white-space: nowrap;
+  padding: 2px 6px;
+  min-width: 20px;
+  text-align: center;
+  color: #000;
+  border-radius: 5px;
+  border-color: #fff;
+  background-color: #fff;
+  box-sizing: content-box;
+  box-shadow: 0.5px 0.5px 2px 1px rgba(0, 0, 0, 0.08);
 }
 
-
 /* hover */
 .vue-slider:hover .vue-slider-dot-handle,
 .vue-slider:active .vue-slider-dot-handle {
-    visibility: visible;
+  visibility: visible;
 }
 
-
 /* volume style */
 .volume-control .vue-slider-process {
-    background-color: rgba(0, 0, 0, 0.8);
-    border-radius: 15px;
+  background-color: rgba(0, 0, 0, 0.8);
+  border-radius: 15px;
 }
 
 .volume-control:hover .vue-slider-process {
-    background-color: #335eea;
-}
\ No newline at end of file
+  background-color: #335eea;
+}
diff --git a/src/components/ContextMenu.vue b/src/components/ContextMenu.vue
index 00e84bd..a224b35 100644
--- a/src/components/ContextMenu.vue
+++ b/src/components/ContextMenu.vue
@@ -42,7 +42,7 @@ export default {
     openMenu(e) {
       this.showMenu = true;
       this.$nextTick(
-        function() {
+        function () {
           this.$refs.menu.focus();
           this.setMenu(e.y, e.x);
         }.bind(this)
diff --git a/src/components/CoverRow.vue b/src/components/CoverRow.vue
index 93ad746..df5667b 100644
--- a/src/components/CoverRow.vue
+++ b/src/components/CoverRow.vue
@@ -60,27 +60,27 @@ export default {
   name: "CoverRow",
   components: {
     Cover,
-    ExplicitSymbol
+    ExplicitSymbol,
   },
   props: {
     items: Array,
     type: String,
     subText: {
       type: String,
-      default: "none"
+      default: "none",
     },
     imageSize: {
       type: Number,
-      default: 512
+      default: 512,
     },
     showPlayButton: {
       type: Boolean,
-      default: false
+      default: false,
     },
     showPlayCount: {
       type: Boolean,
-      default: false
-    }
+      default: false,
+    },
   },
   methods: {
     getUrl(item) {
@@ -102,8 +102,8 @@ export default {
           item.publishTime
         ).getFullYear()}`;
       if (this.subText === "appleMusic") return "by Apple Music";
-    }
-  }
+    },
+  },
 };
 </script>
 
diff --git a/src/components/Navbar.vue b/src/components/Navbar.vue
index 60fc25b..322fbda 100644
--- a/src/components/Navbar.vue
+++ b/src/components/Navbar.vue
@@ -54,13 +54,13 @@ import ButtonIcon from "@/components/ButtonIcon.vue";
 export default {
   name: "Navbar",
   components: {
-    ButtonIcon
+    ButtonIcon,
   },
   data() {
     return {
       inputFocus: false,
       keywords: "",
-      langs: ["zh-CN", "en"]
+      langs: ["zh-CN", "en"],
     };
   },
   methods: {
@@ -77,7 +77,7 @@ export default {
         return;
       this.$router.push({
         name: "search",
-        query: { keywords: this.keywords }
+        query: { keywords: this.keywords },
       });
     },
     changeLang() {
@@ -89,8 +89,8 @@ export default {
       }
       this.$i18n.locale = lang;
       this.$store.commit("changeLang", lang);
-    }
-  }
+    },
+  },
 };
 </script>
 
diff --git a/src/components/Player.vue b/src/components/Player.vue
index 5dc7a7b..12f661e 100644
--- a/src/components/Player.vue
+++ b/src/components/Player.vue
@@ -131,13 +131,13 @@ export default {
   name: "Player",
   components: {
     ButtonIcon,
-    VueSlider
+    VueSlider,
   },
   data() {
     return {
       interval: null,
       progress: 0,
-      oldVolume: 0.5
+      oldVolume: 0.5,
     };
   },
   created() {
@@ -145,7 +145,7 @@ export default {
       this.progress = ~~this.howler.seek();
     }, 1000);
     if (this.isLoggedIn) {
-      userLikedSongsIDs(this.settings.user.userId).then(data => {
+      userLikedSongsIDs(this.settings.user.userId).then((data) => {
         this.updateLikedSongs(data.ids);
       });
     }
@@ -162,7 +162,7 @@ export default {
       set(value) {
         this.updatePlayerState({ key: "volume", value });
         Howler.volume(value);
-      }
+      },
     },
     playing() {
       if (this.howler.state() === "loading") {
@@ -176,7 +176,7 @@ export default {
     },
     isLoggedIn() {
       return isLoggedIn();
-    }
+    },
   },
   methods: {
     ...mapMutations([
@@ -184,13 +184,13 @@ export default {
       "turnOffShuffleMode",
       "updatePlayerState",
       "updateRepeatStatus",
-      "updateLikedSongs"
+      "updateLikedSongs",
     ]),
     ...mapActions([
       "nextTrack",
       "previousTrack",
       "playTrackOnListByID",
-      "addNextTrackEvent"
+      "addNextTrackEvent",
     ]),
     play() {
       if (this.playing) {
@@ -259,7 +259,7 @@ export default {
       if (this.liked.songs.includes(id)) like = false;
       likeATrack({ id, like }).then(() => {
         if (like === false) {
-          this.updateLikedSongs(this.liked.songs.filter(d => d !== id));
+          this.updateLikedSongs(this.liked.songs.filter((d) => d !== id));
         } else {
           let newLikeSongs = this.liked.songs;
           newLikeSongs.push(id);
@@ -272,7 +272,7 @@ export default {
         this.$router.push({ path: "/library/liked-songs" });
       else
         this.$router.push({
-          path: "/" + this.player.listInfo.type + "/" + this.player.listInfo.id
+          path: "/" + this.player.listInfo.type + "/" + this.player.listInfo.id,
         });
     },
     goToAlbum() {
@@ -280,8 +280,8 @@ export default {
     },
     goToArtist(id) {
       this.$router.push({ path: "/artist/" + id });
-    }
-  }
+    },
+  },
 };
 </script>
 
diff --git a/src/components/TrackList.vue b/src/components/TrackList.vue
index 22b4658..bf767ce 100644
--- a/src/components/TrackList.vue
+++ b/src/components/TrackList.vue
@@ -27,7 +27,7 @@ import {
   playPlaylistByID,
   playAlbumByID,
   playAList,
-  appendTrackToPlayerList
+  appendTrackToPlayerList,
 } from "@/utils/play";
 
 import TrackListItem from "@/components/TrackListItem.vue";
@@ -37,7 +37,7 @@ export default {
   name: "TrackList",
   components: {
     TrackListItem,
-    ContextMenu
+    ContextMenu,
   },
   props: {
     tracks: Array,
@@ -45,17 +45,17 @@ export default {
     id: Number,
     itemWidth: {
       type: Number,
-      default: -1
+      default: -1,
     },
     dbclickTrackFunc: {
       type: String,
-      default: "default"
-    }
+      default: "default",
+    },
   },
   data() {
     return {
       rightClickedTrack: null,
-      listStyles: {}
+      listStyles: {},
     };
   },
   created() {
@@ -66,7 +66,7 @@ export default {
     ...mapState(["liked"]),
     isRightClickedTrackLiked() {
       return this.liked.songs.includes(this.rightClickedTrack?.id);
-    }
+    },
   },
   methods: {
     ...mapMutations(["updateLikedSongs"]),
@@ -95,7 +95,7 @@ export default {
       } else if (this.type === "album") {
         playAlbumByID(this.id, trackID);
       } else if (this.type === "tracklist") {
-        let trackIDs = this.tracks.map(t => t.id);
+        let trackIDs = this.tracks.map((t) => t.id);
         playAList(trackIDs, this.tracks[0].ar[0].id, "artist", trackID);
       }
     },
@@ -112,17 +112,17 @@ export default {
       let like = true;
       let likedSongs = this.liked.songs;
       if (likedSongs.includes(id)) like = false;
-      likeATrack({ id, like }).then(data => {
+      likeATrack({ id, like }).then((data) => {
         if (data.code !== 200) return;
         if (like === false) {
-          this.updateLikedSongs(likedSongs.filter(d => d !== id));
+          this.updateLikedSongs(likedSongs.filter((d) => d !== id));
         } else {
           likedSongs.push(id);
           this.updateLikedSongs(likedSongs);
         }
       });
-    }
-  }
+    },
+  },
 };
 </script>
 
diff --git a/src/components/TrackListItem.vue b/src/components/TrackListItem.vue
index 3f11790..d8dc8eb 100644
--- a/src/components/TrackListItem.vue
+++ b/src/components/TrackListItem.vue
@@ -21,7 +21,10 @@
         track.no
       }}</span>
       <button v-show="isPlaying">
-        <svg-icon icon-class="volume" style="height:16px;width:16px"></svg-icon>
+        <svg-icon
+          icon-class="volume"
+          style="height: 16px; width: 16px"
+        ></svg-icon>
       </button>
     </div>
     <div class="title-and-artist">
@@ -59,7 +62,7 @@
           icon-class="heart"
           :style="{
             visibility:
-              focus && !isLiked && track.playable ? 'visible' : 'hidden'
+              focus && !isLiked && track.playable ? 'visible' : 'hidden',
           }"
         ></svg-icon>
         <svg-icon icon-class="heart-solid" v-show="isLiked"></svg-icon>
@@ -81,7 +84,7 @@ export default {
   name: "TrackListItem",
   components: { ArtistsInLine, ExplicitSymbol },
   props: {
-    track: Object
+    track: Object,
   },
   data() {
     return { focus: false, trackStyle: {} };
@@ -123,7 +126,7 @@ export default {
     },
     isLoggedIn() {
       return isLoggedIn();
-    }
+    },
   },
   methods: {
     goToAlbum() {
@@ -134,12 +137,12 @@ export default {
     },
     likeThisSong() {
       this.$parent.likeASong(this.track.id);
-    }
+    },
   },
   created() {
     if (this.$parent.itemWidth !== -1)
       this.trackStyle = { width: this.$parent.itemWidth + "px" };
-  }
+  },
 };
 </script>
 
diff --git a/src/locale/index.js b/src/locale/index.js
index 34c3548..2d41179 100644
--- a/src/locale/index.js
+++ b/src/locale/index.js
@@ -11,8 +11,8 @@ const i18n = new VueI18n({
   locale: store.state.settings.lang,
   messages: {
     en,
-    "zh-CN": zhCN
-  }
+    "zh-CN": zhCN,
+  },
 });
 
 export default i18n;
diff --git a/src/locale/lang/en.js b/src/locale/lang/en.js
index 4c71e3a..cea3a0c 100644
--- a/src/locale/lang/en.js
+++ b/src/locale/lang/en.js
@@ -4,26 +4,26 @@ export default {
     home: "Home",
     explore: "Explore",
     library: "Library",
-    search: "Search"
+    search: "Search",
   },
   footer: {
-    settings: "Settings"
+    settings: "Settings",
   },
   home: {
     recommendPlaylist: "Recommended Playlists",
     recommendArtist: "Recommended Artists",
     newAlbum: "Latest Albums",
     seeMore: "SEE MORE",
-    charts: "Charts"
+    charts: "Charts",
   },
   library: {
     sLibrary: "'s Library",
     likedSongs: "Liked Songs",
-    sLikedSongs: "'s LikedSongs"
+    sLikedSongs: "'s LikedSongs",
   },
   explore: {
     explore: "Explore",
-    loadMore: "Load More"
+    loadMore: "Load More",
   },
   artist: {
     latestRelease: "Latest Releases",
@@ -34,14 +34,14 @@ export default {
     albums: "Albums",
     withAlbums: "Albums",
     artist: "Artist",
-    videos: "Music Videos"
+    videos: "Music Videos",
   },
   album: {
-    released: "Released"
+    released: "Released",
   },
   playlist: {
     playlist: "Playlists",
-    updatedAt: "Updated at"
+    updatedAt: "Updated at",
   },
   login: {
     accessToAll: "Access to all data",
@@ -62,14 +62,14 @@ export default {
     loginWithPhone: "Login with Phone",
     notice: `YesPlayMusic promises not to save any of your account information to the cloud.<br />
       Your password will be MD5 encrypted locally and then transmitted to NetEase Cloud API.<br />
-      YesPlayMusic is not the official website of NetEase Cloud Music, please consider carefully before entering account information. You can also go to <a href="https://github.com/qier222/YesPlayMusic">YesPlayMusic's GitHub repository</a> to build and use the self-hosted NetEase Cloud Music API.`
+      YesPlayMusic is not the official website of NetEase Cloud Music, please consider carefully before entering account information. You can also go to <a href="https://github.com/qier222/YesPlayMusic">YesPlayMusic's GitHub repository</a> to build and use the self-hosted NetEase Cloud Music API.`,
   },
   mv: {
-    moreVideo: "More Videos"
+    moreVideo: "More Videos",
   },
   next: {
     nowPlaying: "Now Playing",
-    nextUp: "Next Up"
+    nextUp: "Next Up",
   },
   player: {
     like: "Like",
@@ -80,10 +80,10 @@ export default {
     play: "Play",
     pause: "Pause",
     mute: "Mute",
-    nextUp: "Next Up"
+    nextUp: "Next Up",
   },
   modal: {
-    close: "Close"
+    close: "Close",
   },
   search: {
     artist: "Artists",
@@ -92,9 +92,9 @@ export default {
     mv: "MVs",
     playlist: "Playlists",
     noResult: "No Results",
-    searchFor: "Search for"
+    searchFor: "Search for",
   },
   common: {
     songs: "Songs",
-  }
+  },
 };
diff --git a/src/locale/lang/zh-CN.js b/src/locale/lang/zh-CN.js
index 22ddaf5..ee9eaac 100644
--- a/src/locale/lang/zh-CN.js
+++ b/src/locale/lang/zh-CN.js
@@ -4,26 +4,26 @@ export default {
     home: "首页",
     explore: "发现",
     library: "资料库",
-    search: "搜索"
+    search: "搜索",
   },
   footer: {
-    settings: "设置"
+    settings: "设置",
   },
   home: {
     recommendPlaylist: "推荐歌单",
     recommendArtist: "推荐歌手",
     newAlbum: "新专速递",
     seeMore: "更多",
-    charts: "排行榜"
+    charts: "排行榜",
   },
   library: {
     sLibrary: "的资料库",
     likedSongs: "我喜欢的歌",
-    sLikedSongs: "喜欢的歌"
+    sLikedSongs: "喜欢的歌",
   },
   explore: {
     explore: "发现",
-    loadMore: "加载更多"
+    loadMore: "加载更多",
   },
   artist: {
     latestRelease: "最新发布",
@@ -34,14 +34,14 @@ export default {
     albums: "专辑",
     withAlbums: "张专辑",
     artist: "歌手",
-    videos: "个视频"
+    videos: "个视频",
   },
   album: {
-    released: "发行于"
+    released: "发行于",
   },
   playlist: {
     playlist: "歌单",
-    updatedAt: "最后更新于"
+    updatedAt: "最后更新于",
   },
   login: {
     accessToAll: "可访问全部数据",
@@ -67,14 +67,14 @@ export default {
       <a href="https://github.com/qier222/YesPlayMusic"
         >YesPlayMusic 的 GitHub 源代码仓库</a
       >
-      自行构建并使用自托管的网易云 API。`
+      自行构建并使用自托管的网易云 API。`,
   },
   mv: {
-    moreVideo: "更多视频"
+    moreVideo: "更多视频",
   },
   next: {
     nowPlaying: "正在播放",
-    nextUp: "即将播放"
+    nextUp: "即将播放",
   },
   player: {
     like: "喜欢",
@@ -85,10 +85,10 @@ export default {
     play: "播放",
     pause: "暂停",
     mute: "静音",
-    nextUp: "播放列表"
+    nextUp: "播放列表",
   },
   modal: {
-    close: "关闭"
+    close: "关闭",
   },
   search: {
     artist: "歌手",
@@ -97,9 +97,9 @@ export default {
     mv: "视频",
     playlist: "歌单",
     noResult: "暂无结果",
-    searchFor: "搜索"
+    searchFor: "搜索",
   },
   common: {
     songs: "首歌",
-  }
+  },
 };
diff --git a/src/main.js b/src/main.js
index 4f009fb..e296e80 100644
--- a/src/main.js
+++ b/src/main.js
@@ -15,7 +15,7 @@ import { Integrations } from "@sentry/tracing";
 
 Vue.use(VueAnalytics, {
   id: "UA-180189423-1",
-  router
+  router,
 });
 
 Vue.config.productionTip = false;
@@ -30,14 +30,14 @@ if (process.env.VUE_APP_ENABLE_SENTRY === "true") {
     integrations: [
       new VueIntegration({
         Vue,
-        tracing: true
+        tracing: true,
       }),
-      new Integrations.BrowserTracing()
+      new Integrations.BrowserTracing(),
     ],
 
     // We recommend adjusting this value in production, or using tracesSampler
     // for finer control
-    tracesSampleRate: 1.0
+    tracesSampleRate: 1.0,
   });
 }
 
@@ -45,5 +45,5 @@ new Vue({
   i18n,
   store,
   router,
-  render: h => h(App)
+  render: (h) => h(App),
 }).$mount("#app");
diff --git a/src/registerServiceWorker.js b/src/registerServiceWorker.js
index 76cede0..1473a0a 100644
--- a/src/registerServiceWorker.js
+++ b/src/registerServiceWorker.js
@@ -1,32 +1,34 @@
 /* eslint-disable no-console */
 
-import { register } from 'register-service-worker'
+import { register } from "register-service-worker";
 
-if (process.env.NODE_ENV === 'production') {
+if (process.env.NODE_ENV === "production") {
   register(`${process.env.BASE_URL}service-worker.js`, {
-    ready () {
+    ready() {
       console.log(
-        'App is being served from cache by a service worker.\n' +
-        'For more details, visit https://goo.gl/AFskqB'
-      )
+        "App is being served from cache by a service worker.\n" +
+          "For more details, visit https://goo.gl/AFskqB"
+      );
     },
-    registered () {
-      console.log('Service worker has been registered.')
+    registered() {
+      console.log("Service worker has been registered.");
     },
-    cached () {
-      console.log('Content has been cached for offline use.')
+    cached() {
+      console.log("Content has been cached for offline use.");
     },
-    updatefound () {
-      console.log('New content is downloading.')
+    updatefound() {
+      console.log("New content is downloading.");
     },
-    updated () {
-      console.log('New content is available; please refresh.')
+    updated() {
+      console.log("New content is available; please refresh.");
     },
-    offline () {
-      console.log('No internet connection found. App is running in offline mode.')
+    offline() {
+      console.log(
+        "No internet connection found. App is running in offline mode."
+      );
+    },
+    error(error) {
+      console.error("Error during service worker registration:", error);
     },
-    error (error) {
-      console.error('Error during service worker registration:', error)
-    }
-  })
+  });
 }
diff --git a/src/store/actions.js b/src/store/actions.js
index 65299d4..4cea2e1 100644
--- a/src/store/actions.js
+++ b/src/store/actions.js
@@ -4,27 +4,27 @@ import { isLoggedIn } from "@/utils/auth";
 
 export default {
   switchTrack({ state, dispatch, commit }, basicTrack) {
-    getTrackDetail(basicTrack.id).then(data => {
+    getTrackDetail(basicTrack.id).then((data) => {
       let track = data.songs[0];
       track.sort = basicTrack.sort;
       // 获取当前的播放时间。初始化为 loading 状态时返回 howler 的实例而不是浮点数时间，比如 1.332
       let time = state.howler.seek();
-      let currentTime = 0
+      let currentTime = 0;
       if (time === 0) {
         // state.howler._duration 可以获得当前实例的播放时长
-        currentTime = 180
+        currentTime = 180;
       }
-      if (time.toString() === '[object Object]') {
-        currentTime = 0
+      if (time.toString() === "[object Object]") {
+        currentTime = 0;
       }
       if (time > 0) {
-        currentTime = time
+        currentTime = time;
       }
       scrobble({
         id: state.player.currentTrack.id,
         sourceid: state.player.listInfo.id,
-        time: currentTime
-      })
+        time: currentTime,
+      });
       commit("updateCurrentTrack", track);
       updateMediaSessionMetaData(track);
       document.title = `${track.name} · ${track.ar[0].name} - YesPlayMusic`;
@@ -42,7 +42,7 @@ export default {
       }
 
       if (isLoggedIn) {
-        getMP3(track.id).then(data => {
+        getMP3(track.id).then((data) => {
           commitMP3(data.data[0].url.replace(/^http:/, "https:"));
         });
       } else {
@@ -53,24 +53,24 @@ export default {
   playFirstTrackOnList({ state, dispatch }) {
     dispatch(
       "switchTrack",
-      state.player.list.find(t => t.sort === 0)
+      state.player.list.find((t) => t.sort === 0)
     );
   },
   playTrackOnListByID({ state, commit, dispatch }, trackID) {
-    let track = state.player.list.find(t => t.id === trackID);
+    let track = state.player.list.find((t) => t.id === trackID);
     dispatch("switchTrack", track);
     if (state.player.shuffle) {
       // 当随机模式开启时，双击列表的一首歌进行播放，此时要把这首歌的sort调到第一(0)，这样用户就能随机播放完整的歌单
-      let otherTrack = state.player.list.find(t => t.sort === 0);
+      let otherTrack = state.player.list.find((t) => t.sort === 0);
       commit("switchSortBetweenTwoTracks", {
         trackID1: track.id,
-        trackID2: otherTrack.id
+        trackID2: otherTrack.id,
       });
     }
   },
   nextTrack({ state, dispatch }, realNext = false) {
     let nextTrack = state.player.list.find(
-      track => track.sort === state.player.currentTrack.sort + 1
+      (track) => track.sort === state.player.currentTrack.sort + 1
     );
 
     if (state.player.repeat === "one" && realNext === false) {
@@ -79,7 +79,7 @@ export default {
 
     if (nextTrack === undefined) {
       if (state.player.repeat !== "off") {
-        nextTrack = state.player.list.find(t => t.sort === 0);
+        nextTrack = state.player.list.find((t) => t.sort === 0);
       } else {
         return;
       }
@@ -89,13 +89,13 @@ export default {
   },
   previousTrack({ state, dispatch }) {
     let previousTrack = state.player.list.find(
-      track => track.sort === state.player.currentTrack.sort - 1
+      (track) => track.sort === state.player.currentTrack.sort - 1
     );
     if (previousTrack == undefined) {
       if (state.player.repeat !== "off") {
         previousTrack = state.player.list.reduce((x, y) => (x > y ? x : y));
       } else {
-        previousTrack = state.player.list.find(t => t.sort === 0);
+        previousTrack = state.player.list.find((t) => t.sort === 0);
       }
     }
     dispatch("switchTrack", previousTrack);
@@ -104,5 +104,5 @@ export default {
     state.howler.once("end", () => {
       dispatch("nextTrack");
     });
-  }
+  },
 };
diff --git a/src/store/index.js b/src/store/index.js
index 081fb29..f69ef0a 100644
--- a/src/store/index.js
+++ b/src/store/index.js
@@ -13,7 +13,7 @@ if (localStorage.getItem("appVersion") === null) {
   window.location.reload();
 }
 
-const saveToLocalStorage = store => {
+const saveToLocalStorage = (store) => {
   store.subscribe((mutation, state) => {
     // console.log(mutation);
     localStorage.setItem("player", JSON.stringify(state.player));
@@ -26,15 +26,15 @@ const store = new Vuex.Store({
   state: state,
   mutations,
   actions,
-  plugins: [saveToLocalStorage]
+  plugins: [saveToLocalStorage],
 });
 
 store.state.howler = new Howl({
   src: [
-    `https://music.163.com/song/media/outer/url?id=${store.state.player.currentTrack.id}`
+    `https://music.163.com/song/media/outer/url?id=${store.state.player.currentTrack.id}`,
   ],
   html5: true,
-  format: ["mp3"]
+  format: ["mp3"],
 });
 Howler.volume(store.state.player.volume);
 
diff --git a/src/store/initState.js b/src/store/initState.js
index eaf8144..6442ecc 100644
--- a/src/store/initState.js
+++ b/src/store/initState.js
@@ -1,11 +1,11 @@
 const initState = {
   howler: null,
   liked: {
-    songs: []
+    songs: [],
   },
   contextMenu: {
     clickObjectID: 0,
-    showMenu: false
+    showMenu: false,
   },
   player: {
     enable: false,
@@ -26,51 +26,51 @@ const initState = {
           "https://p1.music.126.net/kHNNN-VxufjlBtyNPIP3kg==/109951165306614548.jpg",
         tns: [],
         pic_str: "109951165306614548",
-        pic: 109951165306614540
+        pic: 109951165306614540,
       },
       time: 196022,
-      playable: true
+      playable: true,
     },
     notShuffledList: [],
     list: [],
     listInfo: {
       type: "",
-      id: ""
-    }
+      id: "",
+    },
   },
   settings: {
     playlistCategories: [
       {
         name: "全部",
-        enable: true
+        enable: true,
       },
       {
         name: "推荐歌单",
-        enable: true
+        enable: true,
       },
       {
         name: "精品歌单",
-        enable: true
+        enable: true,
       },
       {
         name: "官方",
-        enable: true
+        enable: true,
       },
       {
         name: "流行",
-        enable: true
+        enable: true,
       },
       {
         name: "电子",
-        enable: true
+        enable: true,
       },
       {
         name: "摇滚",
-        enable: true
+        enable: true,
       },
       {
         name: "ACG",
-        enable: true
+        enable: true,
       },
       // {
       //   name: "最新专辑",
@@ -78,14 +78,14 @@ const initState = {
       // },
       {
         name: "排行榜",
-        enable: true
-      }
+        enable: true,
+      },
     ],
     user: {
-      id: 0
+      id: 0,
     },
-    lang: null
-  }
+    lang: null,
+  },
 };
 
 export default initState;
diff --git a/src/store/mutations.js b/src/store/mutations.js
index b8f1b0f..428701a 100644
--- a/src/store/mutations.js
+++ b/src/store/mutations.js
@@ -13,7 +13,7 @@ export default {
     state.howler = new Howl({
       src: [mp3],
       autoplay: true,
-      html5: true
+      html5: true,
     });
     state.howler.play();
   },
@@ -28,7 +28,7 @@ export default {
     state.player.repeat = status;
   },
   appendTrackToPlayerList(state, { track, playNext = false }) {
-    let existTrack = state.player.list.find(t => t.id === track.id);
+    let existTrack = state.player.list.find((t) => t.id === track.id);
     if (
       (existTrack === null || existTrack === undefined) &&
       playNext === false
@@ -38,7 +38,7 @@ export default {
     }
 
     // 把track加入到正在播放歌曲的下一首位置
-    state.player.list = state.player.list.map(t => {
+    state.player.list = state.player.list.map((t) => {
       if (t.sort > state.player.currentTrack.sort) {
         t.sort = t.sort + 1;
       }
@@ -54,10 +54,10 @@ export default {
     state.player.shuffle = true;
 
     let newSorts = shuffleAList(
-      state.player.list.filter(t => t.sort > state.player.currentTrack.sort)
+      state.player.list.filter((t) => t.sort > state.player.currentTrack.sort)
     );
 
-    state.player.list = state.player.list.map(track => {
+    state.player.list = state.player.list.map((track) => {
       if (newSorts[track.id] !== undefined) track.sort = newSorts[track.id];
       return track;
     });
@@ -68,7 +68,7 @@ export default {
       JSON.stringify(state.player.notShuffledList)
     );
     state.player.currentTrack.sort = state.player.list.find(
-      t => t.id === state.player.currentTrack.id
+      (t) => t.id === state.player.currentTrack.id
     ).sort;
   },
   shuffleTheListBeforePlay(state) {
@@ -76,7 +76,7 @@ export default {
       JSON.stringify(state.player.list)
     );
     let newSorts = shuffleAList(state.player.list);
-    state.player.list = state.player.list.map(track => {
+    state.player.list = state.player.list.map((track) => {
       track.sort = newSorts[track.id];
       return track;
     });
@@ -91,10 +91,10 @@ export default {
     state.liked.songs = trackIDs;
   },
   switchSortBetweenTwoTracks(state, { trackID1, trackID2 }) {
-    let t1 = state.player.list.find(t => t.id === trackID1);
-    let t2 = state.player.list.find(t => t.id === trackID2);
+    let t1 = state.player.list.find((t) => t.id === trackID1);
+    let t2 = state.player.list.find((t) => t.id === trackID2);
     let sorts = [t1.sort, t2.sort];
-    state.player.list = state.player.list.map(t => {
+    state.player.list = state.player.list.map((t) => {
       if (t.id === t1.id) t.sort = sorts[1];
       if (t.id === t2.id) t.sort = sorts[0];
       return t;
@@ -102,5 +102,5 @@ export default {
   },
   changeLang(state, lang) {
     state.settings.lang = lang;
-  }
+  },
 };
diff --git a/src/utils/common.js b/src/utils/common.js
index 7b73fb4..d061bf9 100644
--- a/src/utils/common.js
+++ b/src/utils/common.js
@@ -4,7 +4,7 @@ import store from "@/store";
 export function isTrackPlayable(track) {
   let result = {
     playable: true,
-    reason: ""
+    reason: "",
   };
   if (track.fee === 1 || track.privilege?.fee === 1) {
     if (isLoggedIn && store.state.settings.user.vipType === 11) {
@@ -27,7 +27,7 @@ export function isTrackPlayable(track) {
 }
 
 export function mapTrackPlayableStatus(tracks) {
-  return tracks.map(t => {
+  return tracks.map((t) => {
     let result = isTrackPlayable(t);
     t.playable = result.playable;
     t.reason = result.reason;
@@ -47,13 +47,13 @@ export function randomNum(minNum, maxNum) {
 }
 
 export function shuffleAList(list) {
-  let sortsList = list.map(t => t.sort);
+  let sortsList = list.map((t) => t.sort);
   for (let i = 1; i < sortsList.length; i++) {
     const random = Math.floor(Math.random() * (i + 1));
     [sortsList[i], sortsList[random]] = [sortsList[random], sortsList[i]];
   }
   let newSorts = {};
-  list.map(track => {
+  list.map((track) => {
     newSorts[track.id] = sortsList.pop();
   });
   return newSorts;
@@ -65,6 +65,8 @@ export function throttle(fn, time) {
     if (isRun) return;
     isRun = true;
     fn.apply(this, arguments);
-    setTimeout(() => { isRun = false }, time);
-  }
+    setTimeout(() => {
+      isRun = false;
+    }, time);
+  };
 }
diff --git a/src/utils/filters.js b/src/utils/filters.js
index 38180da..521bf14 100644
--- a/src/utils/filters.js
+++ b/src/utils/filters.js
@@ -12,10 +12,7 @@ Vue.filter("formatTime", (Milliseconds, format = "HH:MM:SS") => {
   let time = dayjs.duration(Milliseconds);
   let hours = time.hours().toString();
   let mins = time.minutes().toString();
-  let seconds = time
-    .seconds()
-    .toString()
-    .padStart(2, "0");
+  let seconds = time.seconds().toString().padStart(2, "0");
 
   if (format === "HH:MM:SS") {
     return hours !== "0"
@@ -24,7 +21,9 @@ Vue.filter("formatTime", (Milliseconds, format = "HH:MM:SS") => {
   } else if (format === "Human") {
     const hoursUnit = locale.locale === "zh-CN" ? "小时" : "hr";
     const minitesUnit = locale.locale === "zh-CN" ? "分钟" : "min";
-    return hours !== "0" ? `${hours} ${hoursUnit} ${mins} ${minitesUnit}` : `${mins} ${minitesUnit}`;
+    return hours !== "0"
+      ? `${hours} ${hoursUnit} ${mins} ${minitesUnit}`
+      : `${mins} ${minitesUnit}`;
   }
 });
 
@@ -56,7 +55,7 @@ Vue.filter("resizeImage", (imgUrl, size = 512) => {
   return `${httpsImgUrl}?param=${size}y${size}`;
 });
 
-Vue.filter("formatPlayCount", count => {
+Vue.filter("formatPlayCount", (count) => {
   if (!count) return "";
   if (locale.locale === "zh-CN") {
     if (count > 100000000) {
@@ -83,7 +82,7 @@ Vue.filter("formatPlayCount", count => {
   }
 });
 
-Vue.filter("toHttps", url => {
+Vue.filter("toHttps", (url) => {
   if (!url) return "";
   return url.replace(/^http:/, "https:");
 });
diff --git a/src/utils/mediaSession.js b/src/utils/mediaSession.js
index 249251a..6897af9 100644
--- a/src/utils/mediaSession.js
+++ b/src/utils/mediaSession.js
@@ -2,16 +2,16 @@ import store from "@/store";
 
 export function initMediaSession() {
   if ("mediaSession" in navigator) {
-    navigator.mediaSession.setActionHandler("play", function() {
+    navigator.mediaSession.setActionHandler("play", function () {
       store.state.howler.play();
     });
-    navigator.mediaSession.setActionHandler("pause", function() {
+    navigator.mediaSession.setActionHandler("pause", function () {
       store.state.howler.pause();
     });
-    navigator.mediaSession.setActionHandler("previoustrack", function() {
+    navigator.mediaSession.setActionHandler("previoustrack", function () {
       store.dispatch("previousTrack");
     });
-    navigator.mediaSession.setActionHandler("nexttrack", function() {
+    navigator.mediaSession.setActionHandler("nexttrack", function () {
       store.dispatch("nextTrack");
     });
     navigator.mediaSession.setActionHandler("stop", () => {
diff --git a/src/utils/request.js b/src/utils/request.js
index bfecc67..34b74dc 100644
--- a/src/utils/request.js
+++ b/src/utils/request.js
@@ -3,18 +3,18 @@ import axios from "axios";
 const service = axios.create({
   baseURL: process.env.VUE_APP_NETEASE_API_URL,
   withCredentials: true,
-  timeout: 15000
+  timeout: 15000,
 });
 
 const errors = new Map([
   [401, "The token you are using has expired."],
   [502, null],
   [301, "You must login to use this feature."],
-  [-1, "An unexpected error has occurred: "]
+  [-1, "An unexpected error has occurred: "],
 ]);
 
 service.interceptors.response.use(
-  response => {
+  (response) => {
     const res = response.data;
 
     if (res.code !== 200) {
@@ -30,7 +30,7 @@ service.interceptors.response.use(
       return res;
     }
   },
-  error => {
+  (error) => {
     const errMsg = `error: ${error}`;
     console.log(errMsg);
 
diff --git a/src/views/album.vue b/src/views/album.vue
index 3a4b213..ad3c552 100644
--- a/src/views/album.vue
+++ b/src/views/album.vue
@@ -27,13 +27,14 @@
           <span :title="album.publishTime | formatDate">{{
             new Date(album.publishTime).getFullYear()
           }}</span>
-          <span> · {{ album.size }} {{ $t("common.songs") }}</span>,
+          <span> · {{ album.size }} {{ $t("common.songs") }}</span
+          >,
           {{ albumTime | formatTime("Human") }}
         </div>
         <div class="description" @click="showFullDescription = true">
           {{ album.description }}
         </div>
-        <div class="buttons" style="margin-top:32px">
+        <div class="buttons" style="margin-top: 32px">
           <ButtonTwoTone
             @click.native="playAlbumByID(album.id)"
             :iconClass="`play`"
@@ -63,7 +64,7 @@
         <div class="description-full" @click.stop>
           <span>{{ album.description }}</span>
           <span class="close" @click="showFullDescription = false">
-            {{ $t('modal.close') }}
+            {{ $t("modal.close") }}
           </span>
         </div>
       </div>
@@ -89,7 +90,7 @@ export default {
     Cover,
     ButtonTwoTone,
     TrackList,
-    ExplicitSymbol
+    ExplicitSymbol,
   },
   data() {
     return {
@@ -97,27 +98,27 @@ export default {
         id: 0,
         picUrl: "",
         artist: {
-          id: 0
-        }
+          id: 0,
+        },
       },
       tracks: [],
       showFullDescription: false,
-      show: false
+      show: false,
     };
   },
   created() {
     getAlbum(this.$route.params.id)
-      .then(data => {
+      .then((data) => {
         this.album = data.album;
         this.tracks = data.songs;
         NProgress.done();
         this.show = true;
         return this.tracks;
       })
-      .then(tracks => {
+      .then((tracks) => {
         // to get explicit mark
-        let trackIDs = tracks.map(t => t.id);
-        getTrackDetail(trackIDs.join(",")).then(data => {
+        let trackIDs = tracks.map((t) => t.id);
+        getTrackDetail(trackIDs.join(",")).then((data) => {
           this.tracks = data.songs;
         });
       });
@@ -126,20 +127,20 @@ export default {
     ...mapState(["player"]),
     albumTime() {
       let time = 0;
-      this.tracks.map(t => (time = time + t.dt));
+      this.tracks.map((t) => (time = time + t.dt));
       return time;
-    }
+    },
   },
   methods: {
     ...mapMutations(["appendTrackToPlayerList"]),
     ...mapActions(["playFirstTrackOnList", "playTrackOnListByID"]),
     playAlbumByID(id, trackID = "first") {
-      if (this.tracks.find(t => t.playable !== false) === undefined) {
+      if (this.tracks.find((t) => t.playable !== false) === undefined) {
         return;
       }
       playAlbumByID(id, trackID);
-    }
-  }
+    },
+  },
 };
 </script>
 
diff --git a/src/views/artist.vue b/src/views/artist.vue
index 4325b51..71e0cdc 100644
--- a/src/views/artist.vue
+++ b/src/views/artist.vue
@@ -8,7 +8,7 @@
         <div class="name">{{ artist.name }}</div>
         <div class="artist">{{ $t("artist.artist") }}</div>
         <div class="statistics">
-          {{ artist.musicSize }} {{ $t("common.songs") }} · 
+          {{ artist.musicSize }} {{ $t("common.songs") }} ·
           {{ artist.albumSize }} {{ $t("artist.withAlbums") }} ·
           {{ artist.mvSize }} {{ $t("artist.videos") }}
         </div>
@@ -112,7 +112,7 @@ export default {
       show: false,
       artist: {
         img1v1Url:
-          "https://p1.music.126.net/VnZiScyynLG7atLIZ2YPkw==/18686200114669622.jpg"
+          "https://p1.music.126.net/VnZiScyynLG7atLIZ2YPkw==/18686200114669622.jpg",
       },
       popularTracks: [],
       albumsData: [],
@@ -122,52 +122,52 @@ export default {
         id: 0,
         name: "",
         type: "",
-        size: ""
+        size: "",
       },
       showMorePopTracks: false,
-      mvs: []
+      mvs: [],
     };
   },
   computed: {
     ...mapState(["player"]),
     albums() {
-      return this.albumsData.filter(a => a.type === "专辑");
+      return this.albumsData.filter((a) => a.type === "专辑");
     },
     eps() {
-      return this.albumsData.filter(a =>
+      return this.albumsData.filter((a) =>
         ["EP/Single", "EP", "Single"].includes(a.type)
       );
-    }
+    },
   },
   methods: {
     ...mapMutations(["appendTrackToPlayerList"]),
     ...mapActions(["playFirstTrackOnList", "playTrackOnListByID"]),
     loadData(id, next = undefined) {
-      getArtist(id).then(data => {
+      getArtist(id).then((data) => {
         this.artist = data.artist;
         this.popularTracks = data.hotSongs;
         if (next !== undefined) next();
         NProgress.done();
         this.show = true;
       });
-      getArtistAlbum({ id: id, limit: 200 }).then(data => {
+      getArtistAlbum({ id: id, limit: 200 }).then((data) => {
         this.albumsData = data.hotAlbums;
         this.latestRelease = data.hotAlbums[0];
       });
-      artistMv(id).then(data => {
+      artistMv(id).then((data) => {
         this.mvs = data.mvs;
       });
     },
     goToAlbum(id) {
       this.$router.push({
         name: "album",
-        params: { id }
+        params: { id },
       });
     },
     playPopularSongs(trackID = "first") {
-      let trackIDs = this.popularTracks.map(t => t.id);
+      let trackIDs = this.popularTracks.map((t) => t.id);
       playAList(trackIDs, this.artist.id, "artist", trackID);
-    }
+    },
   },
   created() {
     this.loadData(this.$route.params.id);
@@ -186,7 +186,7 @@ export default {
     this.artist.img1v1Url =
       "https://p1.music.126.net/VnZiScyynLG7atLIZ2YPkw==/18686200114669622.jpg";
     this.loadData(to.params.id, next);
-  }
+  },
 };
 </script>
 
diff --git a/src/views/explore.vue b/src/views/explore.vue
index f1280a1..b73b5e5 100644
--- a/src/views/explore.vue
+++ b/src/views/explore.vue
@@ -1,6 +1,6 @@
 <template>
   <div class="explore">
-    <h1>{{ $t('explore.explore') }}</h1>
+    <h1>{{ $t("explore.explore") }}</h1>
     <div class="buttons">
       <div
         class="button"
@@ -35,7 +35,7 @@
         @click.native="getPlaylist"
         color="grey"
         :loading="loadingMore"
-        >{{ $t('explore.loadMore') }}</ButtonTwoTone
+        >{{ $t("explore.loadMore") }}</ButtonTwoTone
       >
     </div>
   </div>
@@ -102,28 +102,26 @@ export default {
     getPlaylist() {
       this.loadingMore = true;
       if (this.activeCategory === "推荐歌单") {
-        return this.getRecommendPlayList()
+        return this.getRecommendPlayList();
       }
       if (this.activeCategory === "精品歌单") {
-        return this.getHighQualityPlaylist()
+        return this.getHighQualityPlaylist();
       }
       if (this.activeCategory === "排行榜") {
-        return this.getTopLists()
+        return this.getTopLists();
       }
-      return this.getTopPlayList()
+      return this.getTopPlayList();
     },
     getRecommendPlayList() {
-      recommendPlaylist({ limit: 100 }).then(data => {
-        this.playlists = []
+      recommendPlaylist({ limit: 100 }).then((data) => {
+        this.playlists = [];
         this.updatePlaylist(data.result);
       });
     },
     getHighQualityPlaylist() {
       let playlists = this.playlists;
       let before =
-        playlists.length !== 0
-          ? playlists[playlists.length - 1].updateTime
-          : 0;
+        playlists.length !== 0 ? playlists[playlists.length - 1].updateTime : 0;
       highQualityPlaylist({ limit: 50, before }).then((data) => {
         this.updatePlaylist(data.playlists);
         this.hasMore = data.more;
@@ -131,7 +129,7 @@ export default {
     },
     getTopLists() {
       toplists().then((data) => {
-        this.playlists = []
+        this.playlists = [];
         this.updatePlaylist(data.list);
       });
     },
@@ -139,11 +137,11 @@ export default {
       topPlaylist({
         cat: this.activeCategory,
         offset: this.playlists.length,
-      }).then(data => {
+      }).then((data) => {
         this.updatePlaylist(data.playlists);
         this.hasMore = data.more;
       });
-    }
+    },
   },
   activated() {
     this.loadData();
diff --git a/src/views/home.vue b/src/views/home.vue
index 32dccaa..33ff372 100644
--- a/src/views/home.vue
+++ b/src/views/home.vue
@@ -1,9 +1,7 @@
 <template>
   <div class="home" v-show="show">
     <div class="index-row">
-      <div class="title">
-        by Apple Music
-      </div>
+      <div class="title"> by Apple Music </div>
       <CoverRow
         :type="'playlist'"
         :items="byAppleMusic"
@@ -70,36 +68,36 @@ export default {
       newReleasesAlbum: { items: [] },
       topList: {
         items: [],
-        ids: [19723756, 180106, 60198, 3812895, 60131]
+        ids: [19723756, 180106, 60198, 3812895, 60131],
       },
       recommendArtists: {
         items: [],
-        indexs: []
-      }
+        indexs: [],
+      },
     };
   },
   computed: {
     byAppleMusic() {
       return byAppleMusic;
-    }
+    },
   },
   methods: {
     loadData() {
       if (!this.show) NProgress.start();
       recommendPlaylist({
-        limit: 10
-      }).then(data => {
+        limit: 10,
+      }).then((data) => {
         this.recommendPlaylist.items = data.result;
         NProgress.done();
         this.show = true;
       });
       newAlbums({
         area: "EA",
-        limit: 10
-      }).then(data => {
+        limit: 10,
+      }).then((data) => {
         this.newReleasesAlbum.items = data.albums;
       });
-      toplistOfArtists(2).then(data => {
+      toplistOfArtists(2).then((data) => {
         let indexs = [];
         while (indexs.length < 5) {
           let tmp = ~~(Math.random() * 100);
@@ -110,16 +108,16 @@ export default {
           indexs.includes(index)
         );
       });
-      toplists().then(data => {
-        this.topList.items = data.list.filter(l =>
+      toplists().then((data) => {
+        this.topList.items = data.list.filter((l) =>
           this.topList.ids.includes(l.id)
         );
       });
-    }
+    },
   },
   activated() {
     this.loadData();
-  }
+  },
 };
 </script>
 
diff --git a/src/views/library.vue b/src/views/library.vue
index dc63212..efa986e 100644
--- a/src/views/library.vue
+++ b/src/views/library.vue
@@ -76,23 +76,23 @@ export default {
       user: {
         profile: {
           avatarUrl: "",
-          nickname: ""
-        }
+          nickname: "",
+        },
       },
       playlists: [],
       hasMorePlaylists: true,
       likedSongsPlaylist: {
         id: 0,
-        trackCount: 0
+        trackCount: 0,
       },
       likedSongs: [],
       likedSongIDs: [],
-      lyric: undefined
+      lyric: undefined,
     };
   },
   created() {
     NProgress.start();
-    userDetail(this.settings.user.userId).then(data => {
+    userDetail(this.settings.user.userId).then((data) => {
       this.user = data;
     });
   },
@@ -107,7 +107,7 @@ export default {
     pickedLyric() {
       if (this.lyric === undefined) return "";
       let lyric = this.lyric.split("\n");
-      lyric = lyric.filter(l => {
+      lyric = lyric.filter((l) => {
         if (l.includes("作词") || l.includes("作曲")) {
           return false;
         }
@@ -120,9 +120,9 @@ export default {
       return [
         lyric[lineIndex].split("]")[1],
         lyric[lineIndex + 1].split("]")[1],
-        lyric[lineIndex + 2].split("]")[1]
+        lyric[lineIndex + 2].split("]")[1],
       ];
-    }
+    },
   },
   methods: {
     playLikedSongs() {
@@ -141,8 +141,8 @@ export default {
       userPlaylist({
         uid: this.settings.user.userId,
         offset: this.playlists.length === 0 ? 0 : this.playlists.length - 1,
-        timestamp: new Date().getTime()
-      }).then(data => {
+        timestamp: new Date().getTime(),
+      }).then((data) => {
         if (replace) {
           this.playlists = data.playlist;
         } else {
@@ -153,11 +153,11 @@ export default {
     },
     getLikedSongs(getLyric = true) {
       getPlaylistDetail(this.settings.user.likedSongPlaylistID, true).then(
-        data => {
+        (data) => {
           this.likedSongsPlaylist = data.playlist;
-          let TrackIDs = data.playlist.trackIds.slice(0, 20).map(t => t.id);
+          let TrackIDs = data.playlist.trackIds.slice(0, 20).map((t) => t.id);
           this.likedSongIDs = TrackIDs;
-          getTrackDetail(this.likedSongIDs.join(",")).then(data => {
+          getTrackDetail(this.likedSongIDs.join(",")).then((data) => {
             this.likedSongs = data.songs;
             NProgress.done();
             this.show = true;
@@ -169,16 +169,16 @@ export default {
     getRandomLyric() {
       getLyric(
         this.likedSongIDs[randomNum(0, this.likedSongIDs.length - 1)]
-      ).then(data => {
+      ).then((data) => {
         if (data.lrc !== undefined) this.lyric = data.lrc.lyric;
       });
-    }
+    },
   },
   watch: {
     likedSongsInState() {
       this.getLikedSongs(false);
-    }
-  }
+    },
+  },
 };
 </script>
 
diff --git a/src/views/login.vue b/src/views/login.vue
index f7d8acb..87abafe 100644
--- a/src/views/login.vue
+++ b/src/views/login.vue
@@ -14,8 +14,8 @@
       >
         <div class="container" :class="{ active: activeCard === 1 }">
           <div class="title-info">
-            <div class="title">{{ $t('login.loginText') }}</div>
-            <div class="info">{{ $t('login.accessToAll') }}</div>
+            <div class="title">{{ $t("login.loginText") }}</div>
+            <div class="info">{{ $t("login.accessToAll") }}</div>
           </div>
           <svg-icon icon-class="arrow-right"></svg-icon>
         </div>
@@ -28,8 +28,8 @@
       >
         <div class="container" :class="{ active: activeCard === 2 }">
           <div class="title-info">
-            <div class="title">{{ $t('login.search') }}</div>
-            <div class="info">{{ $t('login.readonly') }}</div>
+            <div class="title">{{ $t("login.search") }}</div>
+            <div class="info">{{ $t("login.readonly") }}</div>
           </div>
           <svg-icon icon-class="arrow-right"></svg-icon>
         </div>
diff --git a/src/views/loginAccount.vue b/src/views/loginAccount.vue
index 8e1aead..36c8918 100644
--- a/src/views/loginAccount.vue
+++ b/src/views/loginAccount.vue
@@ -102,7 +102,7 @@ export default {
       email: "",
       password: "",
       smsCode: "",
-      inputFocus: ""
+      inputFocus: "",
     };
   },
   created() {
@@ -118,11 +118,11 @@ export default {
       Cookies.set("loginMode", "account", { expires: 3650 });
       userPlaylist({
         uid: this.$store.state.settings.user.userId,
-        limit: 1
-      }).then(data => {
+        limit: 1,
+      }).then((data) => {
         this.updateUserInfo({
           key: "likedSongPlaylistID",
-          value: data.playlist[0].id
+          value: data.playlist[0].id,
         });
         this.$router.push({ path: "/library" });
       });
@@ -143,15 +143,15 @@ export default {
           countrycode: this.countryCode.replace("+", "").replace(/\s/g, ""),
           phone: this.phoneNumber.replace(/\s/g, ""),
           password: "fakePassword",
-          md5_password: md5(this.password).toString()
+          md5_password: md5(this.password).toString(),
         })
-          .then(data => {
+          .then((data) => {
             if (data.code !== 502) {
               this.updateUser(data.profile);
               this.afterLogin();
             }
           })
-          .catch(error => {
+          .catch((error) => {
             this.processing = false;
             alert(error);
           });
@@ -169,21 +169,21 @@ export default {
         loginWithEmail({
           email: this.email.replace(/\s/g, ""),
           password: "fakePassword",
-          md5_password: md5(this.password).toString()
+          md5_password: md5(this.password).toString(),
         })
-          .then(data => {
+          .then((data) => {
             if (data.code !== 502) {
               this.updateUser(data.profile);
               this.afterLogin();
             }
           })
-          .catch(error => {
+          .catch((error) => {
             this.processing = false;
             alert(error);
           });
       }
-    }
-  }
+    },
+  },
 };
 </script>
 
diff --git a/src/views/loginUsername.vue b/src/views/loginUsername.vue
index 5d4de8f..0ffd895 100644
--- a/src/views/loginUsername.vue
+++ b/src/views/loginUsername.vue
@@ -1,7 +1,7 @@
 <template>
   <div class="login">
     <div>
-      <div class="title">{{ $t('login.usernameLogin') }}</div>
+      <div class="title">{{ $t("login.usernameLogin") }}</div>
       <div class="sestion">
         <div class="search-box">
           <div class="container">
@@ -53,7 +53,7 @@ import NProgress from "nprogress";
 import { search } from "@/api/others";
 import Cookies from "js-cookie";
 import { userPlaylist } from "@/api/user";
-import { throttle } from '@/utils/common';
+import { throttle } from "@/utils/common";
 
 import ButtonTwoTone from "@/components/ButtonTwoTone.vue";
 
@@ -97,7 +97,7 @@ export default {
     },
     throttleSearch: throttle(function () {
       this.search();
-    }, 500)
+    }, 500),
   },
 };
 </script>
diff --git a/src/views/newAlbum.vue b/src/views/newAlbum.vue
index 1a862e7..890cca5 100644
--- a/src/views/newAlbum.vue
+++ b/src/views/newAlbum.vue
@@ -1,6 +1,6 @@
 <template>
   <div class="newAlbum">
-    <h1>{{ $t("home.newAlbum")}}</h1>
+    <h1>{{ $t("home.newAlbum") }}</h1>
 
     <div class="playlist-row">
       <div class="playlists">
diff --git a/src/views/next.vue b/src/views/next.vue
index f18ebf8..df5cb2b 100644
--- a/src/views/next.vue
+++ b/src/views/next.vue
@@ -24,11 +24,11 @@ import TrackList from "@/components/TrackList.vue";
 export default {
   name: "Next",
   components: {
-    TrackList
+    TrackList,
   },
   data() {
     return {
-      tracks: []
+      tracks: [],
     };
   },
   computed: {
@@ -41,58 +41,60 @@ export default {
     },
     sortedTracks() {
       function compare(property) {
-        return function(obj1, obj2) {
+        return function (obj1, obj2) {
           var value1 = obj1[property];
           var value2 = obj2[property];
           return value1 - value2;
         };
       }
       return this.tracks
-        .filter(t => this.player.list.find(t2 => t2.id === t.id) !== undefined)
-        .filter(t => t.sort > this.player.currentTrack.sort)
+        .filter(
+          (t) => this.player.list.find((t2) => t2.id === t.id) !== undefined
+        )
+        .filter((t) => t.sort > this.player.currentTrack.sort)
         .sort(compare("sort"));
-    }
+    },
   },
   watch: {
     currentTrack() {
       this.loadTracks();
     },
     playerShuffle() {
-      this.tracks = this.tracks.map(t => {
-        t.sort = this.player.list.find(t2 => t.id === t2.id).sort;
+      this.tracks = this.tracks.map((t) => {
+        t.sort = this.player.list.find((t2) => t.id === t2.id).sort;
         return t;
       });
-    }
+    },
   },
   methods: {
     ...mapActions(["playTrackOnListByID"]),
     loadTracks() {
       console.time("loadTracks");
-      let loadedTrackIDs = this.tracks.map(t => t.id);
+      let loadedTrackIDs = this.tracks.map((t) => t.id);
       let basicTracks = this.player.list
         .filter(
-          t =>
+          (t) =>
             t.sort > this.player.currentTrack.sort &&
             t.sort <= this.player.currentTrack.sort + 100
         )
-        .filter(t => loadedTrackIDs.includes(t.id) === false);
+        .filter((t) => loadedTrackIDs.includes(t.id) === false);
 
-      let trackIDs = basicTracks.map(t => t.id);
+      let trackIDs = basicTracks.map((t) => t.id);
       if (trackIDs.length > 0) {
-        getTrackDetail(trackIDs.join(",")).then(data => {
-          let newTracks = data.songs.map(t => {
-            t.sort = this.player.list.find(t2 => t2.id == t.id).sort;
+        getTrackDetail(trackIDs.join(",")).then((data) => {
+          let newTracks = data.songs.map((t) => {
+            t.sort = this.player.list.find((t2) => t2.id == t.id).sort;
             return t;
           });
           this.tracks.push(...newTracks);
         });
       }
       console.timeEnd("loadTracks");
-    }
+    },
   },
   activated() {
     this.loadTracks();
-  }
+  },
 };
 </script>
 
diff --git a/src/views/playlist.vue b/src/views/playlist.vue
index bcda9d9..cf3d9c2 100644
--- a/src/views/playlist.vue
+++ b/src/views/playlist.vue
@@ -13,31 +13,29 @@
         <div class="artist">
           Playlist by
           <span
-            style="font-weight:600"
+            style="font-weight: 600"
             v-if="
               [
                 5277771961,
                 5277965913,
                 5277969451,
                 5277778542,
-                5278068783
+                5278068783,
               ].includes(playlist.id)
             "
             >Apple Music</span
           >
           <a
             v-else
-            :href="
-              `https://music.163.com/#/user/home?id=${playlist.creator.userId}`
-            "
+            :href="`https://music.163.com/#/user/home?id=${playlist.creator.userId}`"
             target="blank"
             >{{ playlist.creator.nickname }}</a
           >
         </div>
         <div class="date-and-count">
           {{ $t("playlist.updatedAt") }}
-          {{ playlist.updateTime | formatDate }} ·
-          {{ playlist.trackCount }} {{ $t("common.songs") }}
+          {{ playlist.updateTime | formatDate }} · {{ playlist.trackCount }}
+          {{ $t("common.songs") }}
         </div>
         <div class="description" @click="showFullDescription = true">
           {{ playlist.description }}
@@ -80,7 +78,7 @@
         <div class="description-full" @click.stop>
           <span>{{ playlist.description }}</span>
           <span class="close" @click="showFullDescription = false">
-            {{ $t('modal.close') }}
+            {{ $t("modal.close") }}
           </span>
         </div>
       </div>
@@ -105,7 +103,7 @@ export default {
   components: {
     Cover,
     ButtonTwoTone,
-    TrackList
+    TrackList,
   },
   data() {
     return {
@@ -113,14 +111,14 @@ export default {
       playlist: {
         coverImgUrl: "",
         creator: {
-          userId: ""
+          userId: "",
         },
-        trackIds: []
+        trackIds: [],
       },
       showFullDescription: false,
       tracks: [],
       loadingMore: false,
-      lastLoadedTrackIndex: 9
+      lastLoadedTrackIndex: 9,
     };
   },
   created() {
@@ -140,23 +138,23 @@ export default {
     },
     isLikeSongsPage() {
       return this.$route.name === "likedSongs";
-    }
+    },
   },
   methods: {
     ...mapMutations(["appendTrackToPlayerList"]),
     ...mapActions(["playFirstTrackOnList", "playTrackOnListByID"]),
     playPlaylistByID(trackID = "first") {
-      let trackIDs = this.playlist.trackIds.map(t => t.id);
+      let trackIDs = this.playlist.trackIds.map((t) => t.id);
       playAList(trackIDs, this.playlist.id, "playlist", trackID);
     },
     likePlaylist() {
       subscribePlaylist({
         id: this.playlist.id,
-        t: this.playlist.subscribed ? 2 : 1
-      }).then(data => {
+        t: this.playlist.subscribed ? 2 : 1,
+      }).then((data) => {
         if (data.code === 200)
           this.playlist.subscribed = !this.playlist.subscribed;
-        getPlaylistDetail(this.id, true).then(data => {
+        getPlaylistDetail(this.id, true).then((data) => {
           this.playlist = data.playlist;
         });
       });
@@ -164,7 +162,7 @@ export default {
     loadData(id, next = undefined) {
       this.id = id;
       getPlaylistDetail(this.id, true)
-        .then(data => {
+        .then((data) => {
           this.playlist = data.playlist;
           this.tracks = data.playlist.tracks;
           NProgress.done();
@@ -191,8 +189,8 @@ export default {
         )
           return t;
       });
-      trackIDs = trackIDs.map(t => t.id);
-      getTrackDetail(trackIDs.join(",")).then(data => {
+      trackIDs = trackIDs.map((t) => t.id);
+      getTrackDetail(trackIDs.join(",")).then((data) => {
         this.tracks.push(...data.songs);
         this.lastLoadedTrackIndex += trackIDs.length;
         this.loadingMore = false;
@@ -213,8 +211,8 @@ export default {
         this.loadingMore = true;
         this.loadMore();
       }
-    }
-  }
+    },
+  },
 };
 </script>
 
diff --git a/src/views/search.vue b/src/views/search.vue
index da0b30e..b08f5cc 100644
--- a/src/views/search.vue
+++ b/src/views/search.vue
@@ -132,7 +132,7 @@ export default {
   components: {
     Cover,
     TrackList,
-    MvRow
+    MvRow,
   },
   data() {
     return {
@@ -141,7 +141,7 @@ export default {
       mvs: [],
       type: 1,
       limit: 30,
-      offset: 0
+      offset: 0,
     };
   },
   computed: {
@@ -155,26 +155,26 @@ export default {
     },
     isExistResult() {
       return Object.keys(this.result).length;
-    } 
+    },
   },
   methods: {
     goToAlbum(id) {
       this.$router.push({ name: "album", params: { id } });
     },
     playTrackInSearchResult(id) {
-      let track = this.tracks.find(t => t.id === id);
+      let track = this.tracks.find((t) => t.id === id);
       appendTrackToPlayerList(track, true);
     },
     getData(keywords) {
-      search({ keywords: keywords, type: 1018 }).then(data => {
+      search({ keywords: keywords, type: 1018 }).then((data) => {
         this.result = data.result;
         NProgress.done();
         this.show = true;
       });
-      search({ keywords: keywords, type: 1004 }).then(data => {
+      search({ keywords: keywords, type: 1004 }).then((data) => {
         this.mvs = data.result.mvs;
       });
-    }
+    },
   },
   created() {
     this.getData(this.$route.query.keywords);
@@ -184,7 +184,7 @@ export default {
     next();
     NProgress.start();
     this.getData(to.query.keywords);
-  }
+  },
 };
 </script>
 
diff --git a/vue.config.js b/vue.config.js
index fe0bf42..2556a4d 100644
--- a/vue.config.js
+++ b/vue.config.js
@@ -31,10 +31,7 @@ module.exports = {
   },
   chainWebpack(config) {
     config.module.rules.delete("svg");
-    config.module
-      .rule("svg")
-      .exclude.add(resolve("src/assets/icons"))
-      .end();
+    config.module.rule("svg").exclude.add(resolve("src/assets/icons")).end();
     config.module
       .rule("icons")
       .test(/\.svg$/)
diff --git a/yarn.lock b/yarn.lock
index 807b1de..5fe41a9 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -1115,6 +1115,11 @@
   resolved "https://registry.npm.taobao.org/@types/normalize-package-data/download/@types/normalize-package-data-2.4.0.tgz?cache=0&sync_timestamp=1596839391651&other_urls=https%3A%2F%2Fregistry.npm.taobao.org%2F%40types%2Fnormalize-package-data%2Fdownload%2F%40types%2Fnormalize-package-data-2.4.0.tgz#e486d0d97396d79beedd0a6e33f4534ff6b4973e"
   integrity sha1-5IbQ2XOW15vu3QpuM/RTT/a0lz4=
 
+"@types/parse-json@^4.0.0":
+  version "4.0.0"
+  resolved "https://registry.npm.taobao.org/@types/parse-json/download/@types/parse-json-4.0.0.tgz?cache=0&sync_timestamp=1596839394119&other_urls=https%3A%2F%2Fregistry.npm.taobao.org%2F%40types%2Fparse-json%2Fdownload%2F%40types%2Fparse-json-4.0.0.tgz#2f8bb441434d163b35fb8ffdccd7138927ffb8c0"
+  integrity sha1-L4u0QUNNFjs1+4/9zNcTiSf/uMA=
+
 "@types/q@^1.5.1":
   version "1.5.4"
   resolved "https://registry.npm.taobao.org/@types/q/download/@types/q-1.5.4.tgz#15925414e0ad2cd765bfef58842f7e26a7accb24"
@@ -2411,7 +2416,7 @@ chalk@^3.0.0:
     ansi-styles "^4.1.0"
     supports-color "^7.1.0"
 
-chalk@^4.1.0:
+chalk@^4.0.0, chalk@^4.1.0:
   version "4.1.0"
   resolved "https://registry.npm.taobao.org/chalk/download/chalk-4.1.0.tgz#4e14870a618d9e2edd97dd8345fd9d9dc315646a"
   integrity sha1-ThSHCmGNni7dl92DRf2dncMVZGo=
@@ -2480,6 +2485,11 @@ ci-info@^1.5.0:
   resolved "https://registry.npm.taobao.org/ci-info/download/ci-info-1.6.0.tgz#2ca20dbb9ceb32d4524a683303313f0304b1e497"
   integrity sha1-LKINu5zrMtRSSmgzAzE/AwSx5Jc=
 
+ci-info@^2.0.0:
+  version "2.0.0"
+  resolved "https://registry.npm.taobao.org/ci-info/download/ci-info-2.0.0.tgz#67a9e964be31a51e15e5010d58e6f12834002f46"
+  integrity sha1-Z6npZL4xpR4V5QENWObxKDQAL0Y=
+
 cipher-base@^1.0.0, cipher-base@^1.0.1, cipher-base@^1.0.3:
   version "1.0.4"
   resolved "https://registry.npm.taobao.org/cipher-base/download/cipher-base-1.0.4.tgz#8760e4ecc272f4c363532f926d874aae2c1397de"
@@ -2677,6 +2687,11 @@ commondir@^1.0.1:
   resolved "https://registry.npm.taobao.org/commondir/download/commondir-1.0.1.tgz#ddd800da0c66127393cca5950ea968a3aaf1253b"
   integrity sha1-3dgA2gxmEnOTzKWVDqloo6rxJTs=
 
+compare-versions@^3.6.0:
+  version "3.6.0"
+  resolved "https://registry.npm.taobao.org/compare-versions/download/compare-versions-3.6.0.tgz#1a5689913685e5a87637b8d3ffca75514ec41d62"
+  integrity sha1-GlaJkTaF5ah2N7jT/8p1UU7EHWI=
+
 component-emitter@^1.2.1:
   version "1.3.0"
   resolved "https://registry.npm.taobao.org/component-emitter/download/component-emitter-1.3.0.tgz#16e4070fba8ae29b679f2215853ee181ab2eabc0"
@@ -2836,6 +2851,17 @@ cosmiconfig@^5.0.0:
     js-yaml "^3.13.1"
     parse-json "^4.0.0"
 
+cosmiconfig@^7.0.0:
+  version "7.0.0"
+  resolved "https://registry.npm.taobao.org/cosmiconfig/download/cosmiconfig-7.0.0.tgz?cache=0&sync_timestamp=1596310819353&other_urls=https%3A%2F%2Fregistry.npm.taobao.org%2Fcosmiconfig%2Fdownload%2Fcosmiconfig-7.0.0.tgz#ef9b44d773959cae63ddecd122de23853b60f8d3"
+  integrity sha1-75tE13OVnK5j3ezRIt4jhTtg+NM=
+  dependencies:
+    "@types/parse-json" "^4.0.0"
+    import-fresh "^3.2.1"
+    parse-json "^5.0.0"
+    path-type "^4.0.0"
+    yaml "^1.10.0"
+
 create-ecdh@^4.0.0:
   version "4.0.4"
   resolved "https://registry.npm.taobao.org/create-ecdh/download/create-ecdh-4.0.4.tgz#d6e7f4bffa66736085a0762fd3a632684dabcc4e"
@@ -4034,6 +4060,13 @@ find-up@^4.0.0, find-up@^4.1.0:
     locate-path "^5.0.0"
     path-exists "^4.0.0"
 
+find-versions@^3.2.0:
+  version "3.2.0"
+  resolved "https://registry.npm.taobao.org/find-versions/download/find-versions-3.2.0.tgz#10297f98030a786829681690545ef659ed1d254e"
+  integrity sha1-ECl/mAMKeGgpaBaQVF72We0dJU4=
+  dependencies:
+    semver-regex "^2.0.0"
+
 flat-cache@^2.0.1:
   version "2.0.1"
   resolved "https://registry.npm.taobao.org/flat-cache/download/flat-cache-2.0.1.tgz#5d296d6f04bda44a4630a301413bdbc2ec085ec0"
@@ -4615,6 +4648,22 @@ human-signals@^1.1.1:
   resolved "https://registry.npm.taobao.org/human-signals/download/human-signals-1.1.1.tgz#c5b1cd14f50aeae09ab6c59fe63ba3395fe4dfa3"
   integrity sha1-xbHNFPUK6uCatsWf5jujOV/k36M=
 
+husky@^4.3.0:
+  version "4.3.0"
+  resolved "https://registry.npm.taobao.org/husky/download/husky-4.3.0.tgz?cache=0&sync_timestamp=1602813564105&other_urls=https%3A%2F%2Fregistry.npm.taobao.org%2Fhusky%2Fdownload%2Fhusky-4.3.0.tgz#0b2ec1d66424e9219d359e26a51c58ec5278f0de"
+  integrity sha1-Cy7B1mQk6SGdNZ4mpRxY7FJ48N4=
+  dependencies:
+    chalk "^4.0.0"
+    ci-info "^2.0.0"
+    compare-versions "^3.6.0"
+    cosmiconfig "^7.0.0"
+    find-versions "^3.2.0"
+    opencollective-postinstall "^2.0.2"
+    pkg-dir "^4.2.0"
+    please-upgrade-node "^3.2.0"
+    slash "^3.0.0"
+    which-pm-runs "^1.0.0"
+
 iconv-lite@0.4.24, iconv-lite@^0.4.24:
   version "0.4.24"
   resolved "https://registry.npm.taobao.org/iconv-lite/download/iconv-lite-0.4.24.tgz#2022b4b25fbddc21d2f524974a474aafe733908b"
@@ -4674,7 +4723,7 @@ import-fresh@^2.0.0:
     caller-path "^2.0.0"
     resolve-from "^3.0.0"
 
-import-fresh@^3.0.0:
+import-fresh@^3.0.0, import-fresh@^3.2.1:
   version "3.2.1"
   resolved "https://registry.npm.taobao.org/import-fresh/download/import-fresh-3.2.1.tgz?cache=0&sync_timestamp=1589682760620&other_urls=https%3A%2F%2Fregistry.npm.taobao.org%2Fimport-fresh%2Fdownload%2Fimport-fresh-3.2.1.tgz#633ff618506e793af5ac91bf48b72677e15cbe66"
   integrity sha1-Yz/2GFBueTr1rJG/SLcmd+FcvmY=
@@ -6129,6 +6178,11 @@ open@^6.3.0:
   dependencies:
     is-wsl "^1.1.0"
 
+opencollective-postinstall@^2.0.2:
+  version "2.0.3"
+  resolved "https://registry.npm.taobao.org/opencollective-postinstall/download/opencollective-postinstall-2.0.3.tgz#7a0fff978f6dbfa4d006238fbac98ed4198c3259"
+  integrity sha1-eg//l49tv6TQBiOPusmO1BmMMlk=
+
 opener@^1.5.1:
   version "1.5.2"
   resolved "https://registry.npm.taobao.org/opener/download/opener-1.5.2.tgz?cache=0&sync_timestamp=1598733244715&other_urls=https%3A%2F%2Fregistry.npm.taobao.org%2Fopener%2Fdownload%2Fopener-1.5.2.tgz#5d37e1f35077b9dcac4301372271afdeb2a13598"
@@ -6380,6 +6434,11 @@ path-type@^3.0.0:
   dependencies:
     pify "^3.0.0"
 
+path-type@^4.0.0:
+  version "4.0.0"
+  resolved "https://registry.npm.taobao.org/path-type/download/path-type-4.0.0.tgz#84ed01c0a7ba380afe09d90a8c180dcd9d03043b"
+  integrity sha1-hO0BwKe6OAr+CdkKjBgNzZ0DBDs=
+
 pbkdf2@^3.0.3:
   version "3.1.1"
   resolved "https://registry.npm.taobao.org/pbkdf2/download/pbkdf2-3.1.1.tgz#cb8724b0fada984596856d1a6ebafd3584654b94"
@@ -6442,13 +6501,20 @@ pkg-dir@^3.0.0:
   dependencies:
     find-up "^3.0.0"
 
-pkg-dir@^4.1.0:
+pkg-dir@^4.1.0, pkg-dir@^4.2.0:
   version "4.2.0"
   resolved "https://registry.npm.taobao.org/pkg-dir/download/pkg-dir-4.2.0.tgz#f099133df7ede422e81d1d8448270eeb3e4261f3"
   integrity sha1-8JkTPfft5CLoHR2ESCcO6z5CYfM=
   dependencies:
     find-up "^4.0.0"
 
+please-upgrade-node@^3.2.0:
+  version "3.2.0"
+  resolved "https://registry.npm.taobao.org/please-upgrade-node/download/please-upgrade-node-3.2.0.tgz#aeddd3f994c933e4ad98b99d9a556efa0e2fe942"
+  integrity sha1-rt3T+ZTJM+StmLmdmlVu+g4v6UI=
+  dependencies:
+    semver-compare "^1.0.0"
+
 plyr@^3.6.2:
   version "3.6.2"
   resolved "https://registry.yarnpkg.com/plyr/-/plyr-3.6.2.tgz#5a55b608acd161262de1cc75ca843aa64355a051"
@@ -6882,6 +6948,11 @@ prepend-http@^1.0.0:
   resolved "https://registry.npm.taobao.org/prepend-http/download/prepend-http-1.0.4.tgz#d4f4562b0ce3696e41ac52d0e002e57a635dc6dc"
   integrity sha1-1PRWKwzjaW5BrFLQ4ALlemNdxtw=
 
+prettier@2.1.2:
+  version "2.1.2"
+  resolved "https://registry.npm.taobao.org/prettier/download/prettier-2.1.2.tgz?cache=0&sync_timestamp=1600215482255&other_urls=https%3A%2F%2Fregistry.npm.taobao.org%2Fprettier%2Fdownload%2Fprettier-2.1.2.tgz#3050700dae2e4c8b67c4c3f666cdb8af405e1ce5"
+  integrity sha1-MFBwDa4uTItnxMP2Zs24r0BeHOU=
+
 prettier@^1.18.2:
   version "1.19.1"
   resolved "https://registry.npm.taobao.org/prettier/download/prettier-1.19.1.tgz?cache=0&sync_timestamp=1600215482255&other_urls=https%3A%2F%2Fregistry.npm.taobao.org%2Fprettier%2Fdownload%2Fprettier-1.19.1.tgz#f7d7f5ff8a9cd872a7be4ca142095956a60797cb"
@@ -7448,6 +7519,16 @@ selfsigned@^1.10.7:
   dependencies:
     node-forge "^0.10.0"
 
+semver-compare@^1.0.0:
+  version "1.0.0"
+  resolved "https://registry.npm.taobao.org/semver-compare/download/semver-compare-1.0.0.tgz#0dee216a1c941ab37e9efb1788f6afc5ff5537fc"
+  integrity sha1-De4hahyUGrN+nvsXiPavxf9VN/w=
+
+semver-regex@^2.0.0:
+  version "2.0.0"
+  resolved "https://registry.npm.taobao.org/semver-regex/download/semver-regex-2.0.0.tgz#a93c2c5844539a770233379107b38c7b4ac9d338"
+  integrity sha1-qTwsWERTmncCMzeRB7OMe0rJ0zg=
+
 "semver@2 || 3 || 4 || 5", semver@^5.4.1, semver@^5.5.0, semver@^5.5.1, semver@^5.6.0:
   version "5.7.1"
   resolved "https://registry.npm.taobao.org/semver/download/semver-5.7.1.tgz?cache=0&sync_timestamp=1589682805026&other_urls=https%3A%2F%2Fregistry.npm.taobao.org%2Fsemver%2Fdownload%2Fsemver-5.7.1.tgz#a954f931aeba508d307bbf069eff0c01c96116f7"
@@ -7606,6 +7687,11 @@ slash@^2.0.0:
   resolved "https://registry.npm.taobao.org/slash/download/slash-2.0.0.tgz?cache=0&sync_timestamp=1589682715547&other_urls=https%3A%2F%2Fregistry.npm.taobao.org%2Fslash%2Fdownload%2Fslash-2.0.0.tgz#de552851a1759df3a8f206535442f5ec4ddeab44"
   integrity sha1-3lUoUaF1nfOo8gZTVEL17E3eq0Q=
 
+slash@^3.0.0:
+  version "3.0.0"
+  resolved "https://registry.npm.taobao.org/slash/download/slash-3.0.0.tgz?cache=0&sync_timestamp=1589682715547&other_urls=https%3A%2F%2Fregistry.npm.taobao.org%2Fslash%2Fdownload%2Fslash-3.0.0.tgz#6539be870c165adbd5240220dbe361f1bc4d4634"
+  integrity sha1-ZTm+hwwWWtvVJAIg2+Nh8bxNRjQ=
+
 slice-ansi@^2.1.0:
   version "2.1.0"
   resolved "https://registry.npm.taobao.org/slice-ansi/download/slice-ansi-2.1.0.tgz#cacd7693461a637a5788d92a7dd4fba068e81636"
@@ -8898,6 +8984,11 @@ which-module@^2.0.0:
   resolved "https://registry.npm.taobao.org/which-module/download/which-module-2.0.0.tgz#d9ef07dce77b9902b8a3a8fa4b31c3e3f7e6e87a"
   integrity sha1-2e8H3Od7mQK4o6j6SzHD4/fm6Ho=
 
+which-pm-runs@^1.0.0:
+  version "1.0.0"
+  resolved "https://registry.npm.taobao.org/which-pm-runs/download/which-pm-runs-1.0.0.tgz#670b3afbc552e0b55df6b7780ca74615f23ad1cb"
+  integrity sha1-Zws6+8VS4LVd9rd4DKdGFfI60cs=
+
 which@^1.2.9:
   version "1.3.1"
   resolved "https://registry.npm.taobao.org/which/download/which-1.3.1.tgz?cache=0&sync_timestamp=1589682812246&other_urls=https%3A%2F%2Fregistry.npm.taobao.org%2Fwhich%2Fdownload%2Fwhich-1.3.1.tgz#a45043d54f5805316da8d62f9f50918d3da70b0a"
@@ -9121,6 +9212,11 @@ yallist@^4.0.0:
   resolved "https://registry.npm.taobao.org/yallist/download/yallist-4.0.0.tgz#9bb92790d9c0effec63be73519e11a35019a3a72"
   integrity sha1-m7knkNnA7/7GO+c1GeEaNQGaOnI=
 
+yaml@^1.10.0:
+  version "1.10.0"
+  resolved "https://registry.npm.taobao.org/yaml/download/yaml-1.10.0.tgz#3b593add944876077d4d683fee01081bd9fff31e"
+  integrity sha1-O1k63ZRIdgd9TWg/7gEIG9n/8x4=
+
 yargs-parser@^13.1.2:
   version "13.1.2"
   resolved "https://registry.npm.taobao.org/yargs-parser/download/yargs-parser-13.1.2.tgz?cache=0&sync_timestamp=1600655138204&other_urls=https%3A%2F%2Fregistry.npm.taobao.org%2Fyargs-parser%2Fdownload%2Fyargs-parser-13.1.2.tgz#130f09702ebaeef2650d54ce6e3e5706f7a4fb38"