diff --git a/ui/package-lock.json b/ui/package-lock.json
index 095650af2..d465feeeb 100644
--- a/ui/package-lock.json
+++ b/ui/package-lock.json
@@ -4,6 +4,11 @@
   "lockfileVersion": 1,
   "requires": true,
   "dependencies": {
+    "@ant-design/css-animation": {
+      "version": "1.7.2",
+      "resolved": "https://registry.npmjs.org/@ant-design/css-animation/-/css-animation-1.7.2.tgz",
+      "integrity": "sha512-bvVOe7A+r7lws58B7r+fgnQDK90cV45AXuvGx6i5CCSX1W/M3AJnHsNggDANBxEtWdNdFWcDd5LorB+RdSIlBw=="
+    },
     "@babel/code-frame": {
       "version": "7.8.3",
       "resolved": "https://registry.npmjs.org/@babel/code-frame/-/code-frame-7.8.3.tgz",
@@ -4080,24 +4085,11 @@
       "resolved": "https://registry.npmjs.org/commondir/-/commondir-1.0.1.tgz",
       "integrity": "sha1-3dgA2gxmEnOTzKWVDqloo6rxJTs="
     },
-    "component-classes": {
-      "version": "1.2.6",
-      "resolved": "https://registry.npmjs.org/component-classes/-/component-classes-1.2.6.tgz",
-      "integrity": "sha1-xkI5TDYYpNiwuJGe/Mu9kw5c1pE=",
-      "requires": {
-        "component-indexof": "0.0.3"
-      }
-    },
     "component-emitter": {
       "version": "1.3.0",
       "resolved": "https://registry.npmjs.org/component-emitter/-/component-emitter-1.3.0.tgz",
       "integrity": "sha512-Rd3se6QB+sO1TwqZjscQrurpEPIfO0/yYnSin6Q/rD3mOutHvUrCAhJub3r90uNb+SESBuE0QYoB90YdfatsRg=="
     },
-    "component-indexof": {
-      "version": "0.0.3",
-      "resolved": "https://registry.npmjs.org/component-indexof/-/component-indexof-0.0.3.tgz",
-      "integrity": "sha1-EdCRMSI5648yyPJa6csAL/6NPCQ="
-    },
     "compose-function": {
       "version": "3.0.3",
       "resolved": "https://registry.npmjs.org/compose-function/-/compose-function-3.0.3.tgz",
@@ -4399,15 +4391,6 @@
         "urix": "^0.1.0"
       }
     },
-    "css-animation": {
-      "version": "1.6.1",
-      "resolved": "https://registry.npmjs.org/css-animation/-/css-animation-1.6.1.tgz",
-      "integrity": "sha512-/48+/BaEaHRY6kNQ2OIPzKf9A6g8WjZYjhiNDNuIVbsm5tXCGIAsHDjB4Xu1C4vXJtUWZo26O68OQkDpNBaPog==",
-      "requires": {
-        "babel-runtime": "6.x",
-        "component-classes": "^1.2.5"
-      }
-    },
     "css-blank-pseudo": {
       "version": "0.1.4",
       "resolved": "https://registry.npmjs.org/css-blank-pseudo/-/css-blank-pseudo-0.1.4.tgz",
@@ -13121,9 +13104,9 @@
       }
     },
     "rc-align": {
-      "version": "3.0.0-rc.1",
-      "resolved": "https://registry.npmjs.org/rc-align/-/rc-align-3.0.0-rc.1.tgz",
-      "integrity": "sha512-GbofumhCUb7SxP410j/fbtR2M9Zml+eoZSdaliZh6R3NhfEj5zP4jcO3HG3S9C9KIcXQQtd/cwVHkb9Y0KU7Hg==",
+      "version": "3.0.0",
+      "resolved": "https://registry.npmjs.org/rc-align/-/rc-align-3.0.0.tgz",
+      "integrity": "sha512-/T/4LOlKJLFe8EwsORuc3pFWOJ8caUpj2vtKIHWea4PhakoleM7KDQsx0n1WDQENIeSfrP9P1FowVxAdvhjsvw==",
       "requires": {
         "classnames": "2.x",
         "dom-align": "^1.7.0",
@@ -13132,17 +13115,14 @@
       }
     },
     "rc-animate": {
-      "version": "2.11.1",
-      "resolved": "https://registry.npmjs.org/rc-animate/-/rc-animate-2.11.1.tgz",
-      "integrity": "sha512-1NyuCGFJG/0Y+9RKh5y/i/AalUCA51opyyS/jO2seELpgymZm2u9QV3xwODwEuzkmeQ1BDPxMLmYLcTJedPlkQ==",
+      "version": "3.0.0",
+      "resolved": "https://registry.npmjs.org/rc-animate/-/rc-animate-3.0.0.tgz",
+      "integrity": "sha512-+ANeyCei4lWSJHWTcocywdYAy6lpRdBva/7Fs3nBBiAngW/W+Gmx+gQEcsmcgQBqziWUYnR91Bk12ltR3GBHPA==",
       "requires": {
-        "babel-runtime": "6.x",
+        "@ant-design/css-animation": "^1.7.2",
         "classnames": "^2.2.6",
-        "css-animation": "^1.3.2",
-        "prop-types": "15.x",
         "raf": "^3.4.0",
-        "rc-util": "^4.15.3",
-        "react-lifecycles-compat": "^3.0.4"
+        "rc-util": "^4.15.3"
       }
     },
     "rc-slider": {
@@ -13177,15 +13157,14 @@
       }
     },
     "rc-trigger": {
-      "version": "4.0.2",
-      "resolved": "https://registry.npmjs.org/rc-trigger/-/rc-trigger-4.0.2.tgz",
-      "integrity": "sha512-to5S1NhK10rWHIgQpoQdwIhuDc2Ok4R4/dh5NLrDt6C+gqkohsdBCYiPk97Z+NwGhRU8N+dbf251bivX8DkzQg==",
+      "version": "4.1.0",
+      "resolved": "https://registry.npmjs.org/rc-trigger/-/rc-trigger-4.1.0.tgz",
+      "integrity": "sha512-EyQjO6aHDAPRvJeyPmg/yVL/8Bp7oA6Lf+4Ay2OyOwhZLzHHN8m+F2XrVWKpjg04eBXbuGBNiucIqv1d/ddE3w==",
       "requires": {
         "classnames": "^2.2.6",
-        "prop-types": "15.x",
         "raf": "^3.4.1",
         "rc-align": "^3.0.0-rc.0",
-        "rc-animate": "^2.10.2",
+        "rc-animate": "^3.0.0",
         "rc-util": "^4.20.0"
       }
     },
@@ -13522,9 +13501,9 @@
       }
     },
     "react-draggable": {
-      "version": "4.3.1",
-      "resolved": "https://registry.npmjs.org/react-draggable/-/react-draggable-4.3.1.tgz",
-      "integrity": "sha512-m8QeV+eIi7LhD5mXoLqDzLbokc6Ncwa0T34fF6uJzWSs4vc4fdZI/XGqHYoEn91T8S6qO+BSXslONh7Jz9VPQQ==",
+      "version": "4.4.2",
+      "resolved": "https://registry.npmjs.org/react-draggable/-/react-draggable-4.4.2.tgz",
+      "integrity": "sha512-zLQs4R4bnBCGnCVTZiD8hPsHtkiJxgMpGDlRESM+EHQo8ysXhKJ2GKdJ8UxxLJdRVceX1j19jy+hQS2wHislPQ==",
       "requires": {
         "classnames": "^2.2.5",
         "prop-types": "^15.6.0"
@@ -13596,9 +13575,9 @@
       "integrity": "sha512-rPCkf/mWBtKc97aLL9/txD8DZdemK0vkA3JMLShjlJB3Pj3s+lpf1KaBzMfQrAmhMQB0n1cU/SUGgKKBCe837Q=="
     },
     "react-jinke-music-player": {
-      "version": "4.12.0",
-      "resolved": "https://registry.npmjs.org/react-jinke-music-player/-/react-jinke-music-player-4.12.0.tgz",
-      "integrity": "sha512-l1Pc1Y7iSrheOrfw3yFDCTztRAw0KbBeo401qhnHiZSfwVKsn9Eabl+RXp2eGv4UDiH1AQQyxivKhfHQIlxKhw==",
+      "version": "4.13.0",
+      "resolved": "https://registry.npmjs.org/react-jinke-music-player/-/react-jinke-music-player-4.13.0.tgz",
+      "integrity": "sha512-aUUYz4UA4MC9tn3hhly8TZfCZu3EIjx9It3mfSG57j+0lWNuohfWrjIe0R0Bm4OW7WYBWRBqW0Y6SVAz78G2wQ==",
       "requires": {
         "classnames": "^2.2.6",
         "downloadjs": "^1.4.7",
diff --git a/ui/package.json b/ui/package.json
index 19b16fa5a..2f4b08b84 100644
--- a/ui/package.json
+++ b/ui/package.json
@@ -12,7 +12,7 @@
     "react": "^16.13.1",
     "react-admin": "^3.4.2",
     "react-dom": "^16.13.1",
-    "react-jinke-music-player": "^4.12.0",
+    "react-jinke-music-player": "^4.13.0",
     "react-measure": "^2.3.0",
     "react-redux": "^7.2.0",
     "react-scripts": "^3.4.1"
diff --git a/ui/src/audioplayer/queue.js b/ui/src/audioplayer/queue.js
index c19a7c5d0..c3a85990c 100644
--- a/ui/src/audioplayer/queue.js
+++ b/ui/src/audioplayer/queue.js
@@ -12,6 +12,7 @@ const mapToAudioLists = (item) => ({
   trackId: item.id,
   name: item.title,
   singer: item.artist,
+  duration: item.duration,
   cover: subsonic.url('getCoverArt', item.id, { size: 300 }),
   musicSrc: subsonic.url('stream', item.id, { ts: true }),
   scrobbled: false,