From b399d5bbdc214220dd177b973867a20ddd3670a1 Mon Sep 17 00:00:00 2001
From: qier222 <68148142+qier222@users.noreply.github.com>
Date: Wed, 14 Oct 2020 15:39:41 +0800
Subject: [PATCH] =?UTF-8?q?=E6=94=AF=E6=8C=81=E6=92=AD=E6=94=BEMV?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 package.json             |    1 +
 src/App.vue              |    5 +-
 src/api/artist.js        |   10 +
 src/api/mv.js            |   29 +
 src/assets/css/plyr.css  | 1618 ++++++++++++++++++++++++++++++++++++++
 src/components/MvRow.vue |  129 +++
 src/router/index.js      |    6 +-
 src/views/artist.vue     |   46 +-
 src/views/mv.vue         |  156 ++++
 src/views/search.vue     |   42 +-
 yarn.lock                |   31 +
 11 files changed, 2021 insertions(+), 52 deletions(-)
 create mode 100644 src/api/mv.js
 create mode 100644 src/assets/css/plyr.css
 create mode 100644 src/components/MvRow.vue
 create mode 100644 src/views/mv.vue

diff --git a/package.json b/package.json
index 532861a..6396d49 100644
--- a/package.json
+++ b/package.json
@@ -13,6 +13,7 @@
     "dayjs": "^1.8.36",
     "howler": "^2.2.0",
     "nprogress": "^0.2.0",
+    "plyr": "^3.6.2",
     "register-service-worker": "^1.7.1",
     "svg-sprite-loader": "^5.0.0",
     "vue": "^2.6.11",
diff --git a/src/App.vue b/src/App.vue
index 611eada..7859cab 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -8,7 +8,10 @@
       <router-view v-if="!$route.meta.keepAlive"></router-view>
     </main>
     <transition name="slide-up">
-      <BottomBar v-if="this.$store.state.player.enable" ref="player"
+      <BottomBar
+        v-if="this.$store.state.player.enable"
+        ref="player"
+        v-show="this.$route.name !== 'mv'"
     /></transition>
     <GlobalEvents
       :filter="(event, handler, eventName) => event.target.tagName !== 'INPUT'"
diff --git a/src/api/artist.js b/src/api/artist.js
index ce20c3b..804a9de 100644
--- a/src/api/artist.js
+++ b/src/api/artist.js
@@ -34,3 +34,13 @@ export function toplistOfArtists(type = null) {
     },
   });
 }
+
+export function artistMv(id) {
+  return request({
+    url: "/artist/mv",
+    method: "get",
+    params: {
+      id,
+    },
+  });
+}
diff --git a/src/api/mv.js b/src/api/mv.js
new file mode 100644
index 0000000..b114afc
--- /dev/null
+++ b/src/api/mv.js
@@ -0,0 +1,29 @@
+import request from "@/utils/request";
+
+export function mvDetail(mvid) {
+  return request({
+    url: "/mv/detail",
+    method: "get",
+    params: {
+      mvid,
+    },
+  });
+}
+
+export function mvUrl(params) {
+  // 必选参数 : id: mv id
+  // 可选参数 : r: 分辨率,默认1080,可从 /mv/detail 接口获取分辨率列表
+  return request({
+    url: "/mv/url",
+    method: "get",
+    params,
+  });
+}
+
+export function simiMv(mvid) {
+  return request({
+    url: "/simi/mv",
+    method: "get",
+    params: { mvid },
+  });
+}
diff --git a/src/assets/css/plyr.css b/src/assets/css/plyr.css
new file mode 100644
index 0000000..7bdab61
--- /dev/null
+++ b/src/assets/css/plyr.css
@@ -0,0 +1,1618 @@
+@keyframes plyr-progress {
+    to {
+        background-position: 25px 0;
+        background-position: var(--plyr-progress-loading-size, 25px) 0
+    }
+}
+
+@keyframes plyr-popup {
+    0% {
+        opacity: .5;
+        transform: translateY(10px)
+    }
+
+    to {
+        opacity: 1;
+        transform: translateY(0)
+    }
+}
+
+@keyframes plyr-fade-in {
+    from {
+        opacity: 0
+    }
+
+    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;
+}
+
+.plyr audio,
+.plyr iframe,
+.plyr video {
+    display: block;
+    height: 100%;
+    width: 100%
+}
+
+.plyr button {
+    font: inherit;
+    line-height: inherit;
+    width: auto
+}
+
+.plyr:focus {
+    outline: 0
+}
+
+.plyr--full-ui {
+    box-sizing: border-box
+}
+
+.plyr--full-ui *,
+.plyr--full-ui ::after,
+.plyr--full-ui ::before {
+    box-sizing: inherit
+}
+
+.plyr--full-ui a,
+.plyr--full-ui button,
+.plyr--full-ui input,
+.plyr--full-ui label {
+    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
+}
+
+.plyr--full-ui ::-webkit-media-text-track-container {
+    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%
+}
+
+.plyr__captions span:empty {
+    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:768px) {
+    .plyr__captions {
+        font-size: 18px;
+        font-size: var(--plyr-font-size-large, 18px)
+    }
+}
+
+.plyr--captions-active .plyr__captions {
+    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__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
+}
+
+.plyr__caption div {
+    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
+}
+
+.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)
+}
+
+.plyr__control:focus {
+    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
+}
+
+a.plyr__control {
+    text-decoration: none
+}
+
+a.plyr__control::after,
+a.plyr__control::before {
+    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
+}
+
+.plyr--full-ui ::-webkit-media-controls {
+    display: none
+}
+
+.plyr__controls {
+    align-items: center;
+    display: flex;
+    justify-content: flex-end;
+    text-align: center
+}
+
+.plyr__controls .plyr__progress__container {
+    flex: 1;
+    min-width: 0
+}
+
+.plyr__controls .plyr__controls__item {
+    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
+}
+
+.plyr__controls .plyr__controls__item.plyr__progress__container {
+    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)
+}
+
+.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:first-child {
+    padding-left: 0
+}
+
+.plyr__controls:empty {
+    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__menu {
+    display: flex;
+    position: relative
+}
+
+.plyr__menu .plyr__control svg {
+    transition: transform .3s ease
+}
+
+.plyr__menu .plyr__control[aria-expanded=true] svg {
+    transform: rotate(90deg)
+}
+
+.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)
+}
+
+.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
+}
+
+.plyr__menu__container [role=menu] {
+    padding: calc(10px * .7);
+    padding: calc(var(--plyr-control-spacing, 10px) * .7)
+}
+
+.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 .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%
+}
+
+.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%)
+}
+
+.plyr__menu__container .plyr__control--forward {
+    padding-right: calc(calc(10px * .7) * 4);
+    padding-right: calc(calc(var(--plyr-control-spacing, 10px) * .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))
+}
+
+.plyr__menu__container .plyr__control--forward.plyr__tab-focus::after,
+.plyr__menu__container .plyr__control--forward:hover::after {
+    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))
+}
+
+.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))
+}
+
+.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%
+}
+
+.plyr__menu__container .plyr__control--back.plyr__tab-focus::after,
+.plyr__menu__container .plyr__control--back:hover::after {
+    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]::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]::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][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].plyr__tab-focus::before,
+.plyr__menu__container .plyr__control[role=menuitemradio]:hover::before {
+    background: rgba(35, 40, 47, .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
+}
+
+.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
+}
+
+.plyr--stopped.plyr__poster-enabled .plyr__poster {
+    opacity: 1
+}
+
+.plyr__time {
+    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)
+}
+
+@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
+}
+
+.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
+}
+
+.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)
+}
+
+.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)
+}
+
+.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
+}
+
+.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))
+}
+
+.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
+}
+
+.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%
+}
+
+.plyr__progress__buffer::-webkit-progress-bar {
+    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
+}
+
+.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
+}
+
+.plyr__progress__buffer::-ms-fill {
+    border-radius: 100px;
+    -ms-transition: width .2s ease;
+    transition: width .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
+}
+
+.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))
+}
+
+.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))
+}
+
+.plyr__volume {
+    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--is-ios .plyr__volume {
+    min-width: 0;
+    width: auto
+}
+
+.plyr--audio {
+    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)
+}
+
+.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__progress__buffer {
+    color: rgba(193, 200, 209, .6);
+    color: var(--plyr-audio-progress-buffered-background, rgba(193, 200, 209, .6))
+}
+
+.plyr--video {
+    overflow: hidden
+}
+
+.plyr--video.plyr--menu-open {
+    overflow: visible
+}
+
+.plyr__video-wrapper {
+    height: 100%;
+    margin: auto;
+    overflow: hidden;
+    position: relative;
+    width: 100%
+}
+
+.plyr__video-embed,
+.plyr__video-wrapper--fixed-ratio {
+    height: 0;
+    padding-bottom: 56.25%
+}
+
+.plyr__video-embed iframe,
+.plyr__video-wrapper--fixed-ratio video {
+    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--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)
+    }
+}
+
+.plyr--video.plyr--hide-controls .plyr__controls {
+    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__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
+}
+
+.plyr__control--overlaid svg {
+    left: 2px;
+    position: relative
+}
+
+.plyr__control--overlaid:focus,
+.plyr__control--overlaid:hover {
+    opacity: 1
+}
+
+.plyr--playing .plyr__control--overlaid {
+    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))
+}
+
+.plyr--video .plyr__progress__buffer {
+    color: rgba(255, 255, 255, .25);
+    color: var(--plyr-video-progress-buffered-background, rgba(255, 255, 255, .25))
+}
+
+.plyr:-webkit-full-screen {
+    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%
+}
+
+.plyr:fullscreen {
+    background: #000;
+    border-radius: 0 !important;
+    height: 100%;
+    margin: 0;
+    width: 100%
+}
+
+.plyr:-webkit-full-screen video {
+    height: 100%
+}
+
+.plyr:-ms-fullscreen video {
+    height: 100%
+}
+
+.plyr:fullscreen video {
+    height: 100%
+}
+
+.plyr:-webkit-full-screen .plyr__video-wrapper {
+    height: 100%;
+    position: static
+}
+
+.plyr:-ms-fullscreen .plyr__video-wrapper {
+    height: 100%;
+    position: static
+}
+
+.plyr:fullscreen .plyr__video-wrapper {
+    height: 100%;
+    position: static
+}
+
+.plyr:-webkit-full-screen.plyr--vimeo .plyr__video-wrapper {
+    height: 0;
+    position: relative
+}
+
+.plyr:-ms-fullscreen.plyr--vimeo .plyr__video-wrapper {
+    height: 0;
+    position: relative
+}
+
+.plyr:fullscreen.plyr--vimeo .plyr__video-wrapper {
+    height: 0;
+    position: relative
+}
+
+.plyr:-webkit-full-screen .plyr__control .icon--exit-fullscreen {
+    display: block
+}
+
+.plyr:-ms-fullscreen .plyr__control .icon--exit-fullscreen {
+    display: block
+}
+
+.plyr:fullscreen .plyr__control .icon--exit-fullscreen {
+    display: block
+}
+
+.plyr:-webkit-full-screen .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:-webkit-full-screen.plyr--hide-controls {
+    cursor: none
+}
+
+.plyr:-ms-fullscreen.plyr--hide-controls {
+    cursor: none
+}
+
+.plyr:fullscreen.plyr--hide-controls {
+    cursor: none
+}
+
+@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: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%
+}
+
+.plyr:-webkit-full-screen video {
+    height: 100%
+}
+
+.plyr:-webkit-full-screen .plyr__video-wrapper {
+    height: 100%;
+    position: static
+}
+
+.plyr:-webkit-full-screen.plyr--vimeo .plyr__video-wrapper {
+    height: 0;
+    position: relative
+}
+
+.plyr:-webkit-full-screen .plyr__control .icon--exit-fullscreen {
+    display: block
+}
+
+.plyr:-webkit-full-screen .plyr__control .icon--exit-fullscreen+svg {
+    display: none
+}
+
+.plyr:-webkit-full-screen.plyr--hide-controls {
+    cursor: none
+}
+
+@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%
+}
+
+.plyr:-moz-full-screen video {
+    height: 100%
+}
+
+.plyr:-moz-full-screen .plyr__video-wrapper {
+    height: 100%;
+    position: static
+}
+
+.plyr:-moz-full-screen.plyr--vimeo .plyr__video-wrapper {
+    height: 0;
+    position: relative
+}
+
+.plyr:-moz-full-screen .plyr__control .icon--exit-fullscreen {
+    display: block
+}
+
+.plyr:-moz-full-screen .plyr__control .icon--exit-fullscreen+svg {
+    display: none
+}
+
+.plyr:-moz-full-screen.plyr--hide-controls {
+    cursor: none
+}
+
+@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%
+}
+
+.plyr:-ms-fullscreen video {
+    height: 100%
+}
+
+.plyr:-ms-fullscreen .plyr__video-wrapper {
+    height: 100%;
+    position: static
+}
+
+.plyr:-ms-fullscreen.plyr--vimeo .plyr__video-wrapper {
+    height: 0;
+    position: relative
+}
+
+.plyr:-ms-fullscreen .plyr__control .icon--exit-fullscreen {
+    display: block
+}
+
+.plyr:-ms-fullscreen .plyr__control .icon--exit-fullscreen+svg {
+    display: none
+}
+
+.plyr:-ms-fullscreen.plyr--hide-controls {
+    cursor: none
+}
+
+@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
+}
+
+.plyr--fullscreen-fallback video {
+    height: 100%
+}
+
+.plyr--fullscreen-fallback .plyr__video-wrapper {
+    height: 100%;
+    position: static
+}
+
+.plyr--fullscreen-fallback.plyr--vimeo .plyr__video-wrapper {
+    height: 0;
+    position: relative
+}
+
+.plyr--fullscreen-fallback .plyr__control .icon--exit-fullscreen {
+    display: block
+}
+
+.plyr--fullscreen-fallback .plyr__control .icon--exit-fullscreen+svg {
+    display: none
+}
+
+.plyr--fullscreen-fallback.plyr--hide-controls {
+    cursor: none
+}
+
+@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
+}
+
+.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
+}
+
+.plyr__ads::after:empty {
+    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
+}
+
+.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
+}
+
+.plyr__preview-thumb--is-shown {
+    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
+}
+
+.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
+}
+
+.plyr__preview-thumb__image-container img {
+    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
+}
+
+.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
+}
+
+.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
+}
+
+.plyr__preview-scrubbing--is-shown {
+    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%
+}
+
+.plyr--no-transition {
+    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
+}
+
+.plyr [hidden] {
+    display: none !important
+}
\ No newline at end of file
diff --git a/src/components/MvRow.vue b/src/components/MvRow.vue
new file mode 100644
index 0000000..d855770
--- /dev/null
+++ b/src/components/MvRow.vue
@@ -0,0 +1,129 @@
+<template>
+  <div class="mv-row">
+    <div class="mv" v-for="mv in mvs" :key="mv.id">
+      <div class="cover-container">
+        <img
+          class="cover"
+          :src="getUrl(mv)"
+          @mouseover="hoverVideoID = mv.id"
+          @mouseleave="hoverVideoID = 0"
+          @click="goToMv(mv.id)"
+        />
+        <transition name="fade">
+          <img
+            class="shadow"
+            v-show="hoverVideoID === mv.id"
+            :src="getUrl(mv)"
+          />
+        </transition>
+      </div>
+      <div class="info">
+        <div class="title">
+          <router-link :to="'/mv/' + mv.id">{{ mv.name }}</router-link>
+        </div>
+        <div class="artist">
+          <router-link
+            v-if="subtitle === 'artist'"
+            :to="'/artist/' + mv.artistId"
+            >{{ mv.artistName }}</router-link
+          >
+          <span v-if="subtitle === 'publishTime'">{{ mv.publishTime }}</span>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  name: "CoverVideo",
+  props: {
+    mvs: Array,
+    subtitle: {
+      type: String,
+      default: "artist",
+    },
+  },
+  data() {
+    return {
+      hoverVideoID: 0,
+    };
+  },
+  methods: {
+    goToMv(id) {
+      this.$router.push({ path: "/mv/" + id });
+    },
+    getUrl(mv) {
+      if (mv.cover !== undefined) return mv.cover;
+      if (mv.imgurl16v9 !== undefined) return mv.imgurl16v9;
+      if (mv.coverUrl !== undefined) return mv.coverUrl;
+    },
+  },
+};
+</script>
+
+<style lang="scss" scoped>
+.mv-row {
+  display: flex;
+  flex-wrap: wrap;
+  margin-left: -12px;
+}
+
+.mv {
+  margin: 12px 12px 24px 12px;
+  width: 204px;
+
+  .title {
+    font-size: 16px;
+    font-weight: 600;
+    color: rgba(0, 0, 0, 0.88);
+    display: -webkit-box;
+    -webkit-box-orient: vertical;
+    -webkit-line-clamp: 2;
+    overflow: hidden;
+  }
+  .artist {
+    font-size: 12px;
+    color: rgba(0, 0, 0, 0.68);
+    display: -webkit-box;
+    -webkit-box-orient: vertical;
+    -webkit-line-clamp: 2;
+    overflow: hidden;
+  }
+}
+
+.cover-container {
+  position: relative;
+  .cover {
+    position: relative;
+    padding: 0;
+    background-size: cover;
+    transition: 0.3s;
+    width: 200px;
+    border-radius: 10px;
+    cursor: pointer;
+    &:hover {
+      transform: scale(1.02);
+      box-shadow: 0 12px 16px -8px rgba(0, 0, 0, 0.05);
+    }
+  }
+
+  .shadow {
+    position: absolute;
+    filter: blur(16px) opacity(0.6);
+    z-index: -1;
+    width: 200px;
+    top: 6px;
+    left: 0;
+    border-radius: 10px;
+  }
+}
+
+.fade-enter-active,
+.fade-leave-active {
+  transition: opacity 0.3s;
+}
+.fade-enter, .fade-leave-to /* .fade-leave-active below version 2.1.8 */ {
+  opacity: 0;
+}
+</style>
diff --git a/src/router/index.js b/src/router/index.js
index 065e565..77c79a5 100644
--- a/src/router/index.js
+++ b/src/router/index.js
@@ -32,6 +32,11 @@ const routes = [
     name: "artist",
     component: () => import("@/views/artist"),
   },
+  {
+    path: "/mv/:id",
+    name: "mv",
+    component: () => import("@/views/mv"),
+  },
   {
     path: "/next",
     name: "next",
@@ -67,7 +72,6 @@ const routes = [
       keepAlive: true,
     },
   },
-
   {
     path: "/library/liked-songs",
     name: "likedSongs",
diff --git a/src/views/artist.vue b/src/views/artist.vue
index 567a60e..e7ad787 100644
--- a/src/views/artist.vue
+++ b/src/views/artist.vue
@@ -75,6 +75,10 @@
         :showPlayButton="true"
       />
     </div>
+    <div class="mvs" v-if="mvs.length !== 0">
+      <div class="section-title">MVs</div>
+      <MvRow :mvs="mvs" subtitle="publishTime" />
+    </div>
     <div class="eps">
       <div class="section-title">EPs & Singles</div>
       <CoverRow
@@ -89,7 +93,7 @@
 
 <script>
 import { mapMutations, mapActions, mapState } from "vuex";
-import { getArtist, getArtistAlbum } from "@/api/artist";
+import { getArtist, getArtistAlbum, artistMv } from "@/api/artist";
 import { mapTrackPlayableStatus } from "@/utils/common";
 import { playAList } from "@/utils/play";
 import NProgress from "nprogress";
@@ -98,10 +102,11 @@ import ButtonTwoTone from "@/components/ButtonTwoTone.vue";
 import TrackList from "@/components/TrackList.vue";
 import CoverRow from "@/components/CoverRow.vue";
 import Cover from "@/components/Cover.vue";
+import MvRow from "@/components/MvRow.vue";
 
 export default {
   name: "Artist",
-  components: { Cover, ButtonTwoTone, TrackList, CoverRow },
+  components: { Cover, ButtonTwoTone, TrackList, CoverRow, MvRow },
   data() {
     return {
       artist: {
@@ -120,6 +125,7 @@ export default {
       },
       showMorePopTracks: false,
       show: false,
+      mvs: [],
     };
   },
   created() {
@@ -156,6 +162,9 @@ export default {
         this.albumsData = data.hotAlbums;
         this.latestRelease = data.hotAlbums[0];
       });
+      artistMv(id).then((data) => {
+        this.mvs = data.mvs;
+      });
     },
     goToAlbum(id) {
       this.$router.push({
@@ -276,37 +285,4 @@ export default {
     }
   }
 }
-
-.cover-row {
-  &:first-child {
-    margin-top: 0;
-  }
-}
-.covers {
-  display: flex;
-  flex-wrap: wrap;
-  margin: {
-    right: -12px;
-    left: -12px;
-  }
-  .cover {
-    margin: 12px 12px 24px 12px;
-    .text {
-      width: 208px;
-      margin-top: 8px;
-      .name {
-        font-size: 16px;
-        font-weight: 600;
-        color: rgba(0, 0, 0, 0.88);
-        line-height: 20px;
-      }
-      .info {
-        font-size: 12px;
-        color: rgba(0, 0, 0, 0.68);
-        line-height: 18px;
-        // margin-top: 4px;
-      }
-    }
-  }
-}
 </style>
diff --git a/src/views/mv.vue b/src/views/mv.vue
new file mode 100644
index 0000000..4fe5cce
--- /dev/null
+++ b/src/views/mv.vue
@@ -0,0 +1,156 @@
+<template>
+  <div class="mv">
+    <div class="current-video">
+      <div class="video">
+        <video ref="videoPlayer" class="plyr"></video>
+      </div>
+      <div class="video-info">
+        <div class="title">
+          <router-link :to="'/artist/' + mv.data.artistId">{{
+            mv.data.artistName
+          }}</router-link>
+          -
+          {{ mv.data.name }}
+        </div>
+        <div class="info">
+          {{ mv.data.playCount }} Views · {{ mv.data.publishTime }}
+        </div>
+      </div>
+    </div>
+    <div class="more-video">
+      <div class="section-title">More Videos</div>
+      <MvRow :mvs="simiMvs" />
+    </div>
+  </div>
+</template>
+
+<script>
+import NProgress from "nprogress";
+import { mvDetail, mvUrl, simiMv } from "@/api/mv";
+import Plyr from "plyr";
+import "@/assets/css/plyr.css";
+
+import MvRow from "@/components/MvRow.vue";
+
+export default {
+  name: "mv",
+  components: {
+    MvRow,
+  },
+  data() {
+    return {
+      mv: {
+        url: "",
+        data: {
+          name: "",
+          artistName: "",
+          playCount: "",
+          publishTime: "",
+        },
+      },
+      player: null,
+      simiMvs: [],
+    };
+  },
+  methods: {
+    getData(id) {
+      mvDetail(id).then((data) => {
+        this.mv = data;
+        let requests = data.data.brs.map((br) => {
+          return mvUrl({ id, r: br.br });
+        });
+        Promise.all(requests).then((results) => {
+          let sources = results.map((result) => {
+            return {
+              src: result.data.url,
+              type: "video/mp4",
+              size: result.data.r,
+            };
+          });
+          console.table(sources);
+          this.player.source = {
+            type: "video",
+            title: this.mv.data.name,
+            sources: sources,
+            poster: this.mv.data.cover,
+          };
+          NProgress.done();
+        });
+      });
+      simiMv(id).then((data) => {
+        this.simiMvs = data.mvs;
+      });
+    },
+  },
+  created() {
+    if (this.$route.query.autoplay === "true")
+      this.videoOptions.autoplay = true;
+  },
+  mounted() {
+    let videoOptions = {
+      settings: ["quality"],
+      autoplay: false,
+      quality: {
+        default: 1080,
+        options: [1080, 720, 480, 240],
+      },
+    };
+    this.player = new Plyr(this.$refs.videoPlayer, videoOptions);
+    this.player.volume = this.$store.state.player.volume;
+    this.getData(this.$route.params.id);
+    console.log("网易云你这mv音频码率也太糊了吧🙄");
+  },
+  beforeRouteUpdate(to, from, next) {
+    this.getData(to.params.id);
+    next();
+  },
+};
+</script>
+<style lang="scss" scoped>
+.video {
+  --plyr-color-main: #335eea;
+  --plyr-control-radius: 8px;
+}
+
+.mv {
+  width: 100%;
+}
+.current-video {
+  width: 100%;
+}
+.video {
+  border-radius: 16px;
+  background: transparent;
+  overflow: hidden;
+  max-height: 100vh;
+}
+
+.video-info {
+  margin-top: 12px;
+  .title {
+    font-size: 24px;
+    font-weight: 600;
+  }
+  .artist {
+    font-size: 14px;
+    color: rgba(0, 0, 0, 0.88);
+    margin-top: 2px;
+    font-weight: 600;
+  }
+  .info {
+    font-size: 12px;
+    color: rgba(0, 0, 0, 0.68);
+    margin-top: 12px;
+  }
+}
+
+.more-video {
+  margin-top: 48px;
+  .section-title {
+    font-size: 18px;
+    font-weight: 600;
+    margin-bottom: 16px;
+    color: rgba(0, 0, 0, 0.88);
+  }
+}
+</style>
diff --git a/src/views/search.vue b/src/views/search.vue
index 4e73dc3..9b0838d 100644
--- a/src/views/search.vue
+++ b/src/views/search.vue
@@ -73,6 +73,11 @@
         <TrackList :tracks="tracks" :type="'tracklist'" />
       </div>
 
+      <div class="mvs" v-if="mvs.length > 0">
+        <div class="section-title">MVs</div>
+        <MvRow class="mv-row" :mvs="mvs.slice(0, 5)" />
+      </div>
+
       <div class="playlists" v-if="result.hasOwnProperty('playList')">
         <div class="section-title">Playlists</div>
         <div class="albums-list">
@@ -119,16 +124,19 @@ import { search } from "@/api/others";
 
 import Cover from "@/components/Cover.vue";
 import TrackList from "@/components/TrackList.vue";
+import MvRow from "@/components/MvRow.vue";
 
 export default {
   name: "Search",
   components: {
     Cover,
     TrackList,
+    MvRow,
   },
   data() {
     return {
       result: {},
+      mvs: [],
       type: 1,
       limit: 30,
       offset: 0,
@@ -152,31 +160,28 @@ export default {
       let track = this.tracks.find((t) => t.id === id);
       appendTrackToPlayerList(track, true);
     },
-  },
-  created() {
-    search({ keywords: this.$route.query.keywords, type: 1018 }).then(
-      (data) => {
+    getData(keywords) {
+      search({ keywords: keywords, type: 1018 }).then((data) => {
         this.result = data.result;
         NProgress.done();
-      }
-    );
+      });
+      search({ keywords: keywords, type: 1004 }).then((data) => {
+        this.mvs = data.result.mvs;
+      });
+    },
+  },
+  created() {
+    this.getData(this.$route.query.keywords);
   },
   beforeRouteUpdate(to, from, next) {
+    next();
     NProgress.start();
-    search({ keywords: to.query.keywords, type: 1018 }).then((data) => {
-      this.result = data.result;
-      next();
-      NProgress.done();
-    });
+    this.getData(to.query.keywords);
   },
 };
 </script>
 
 <style lang="scss" scoped>
-.search {
-  width: 78vw;
-}
-
 h1 {
   margin-top: -10px;
   margin-bottom: 0;
@@ -256,4 +261,11 @@ h1 {
   margin-top: 24px;
   font-size: 24px;
 }
+
+.mvs {
+  .mv-row {
+    margin-top: -12px;
+    margin-bottom: -24px;
+  }
+}
 </style>
diff --git a/yarn.lock b/yarn.lock
index b0f3b7c..640dba8 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -3003,6 +3003,11 @@ csso@^4.0.2:
   dependencies:
     css-tree "1.0.0-alpha.39"
 
+custom-event-polyfill@^1.0.7:
+  version "1.0.7"
+  resolved "https://registry.yarnpkg.com/custom-event-polyfill/-/custom-event-polyfill-1.0.7.tgz#9bc993ddda937c1a30ccd335614c6c58c4f87aee"
+  integrity sha512-TDDkd5DkaZxZFM8p+1I3yAlvM3rSr1wbrOliG4yJiwinMZN8z/iGL7BTlDkrJcYTmgUSb4ywVCc3ZaUtOtC76w==
+
 cyclist@^1.0.1:
   version "1.0.1"
   resolved "https://registry.npm.taobao.org/cyclist/download/cyclist-1.0.1.tgz#596e9698fd0c80e12038c2b82d6eb1b35b6224d9"
@@ -5275,6 +5280,11 @@ loader-utils@^2.0.0:
     emojis-list "^3.0.0"
     json5 "^2.1.2"
 
+loadjs@^4.2.0:
+  version "4.2.0"
+  resolved "https://registry.yarnpkg.com/loadjs/-/loadjs-4.2.0.tgz#2a0336376397a6a43edf98c9ec3229ddd5abb6f6"
+  integrity sha512-AgQGZisAlTPbTEzrHPb6q+NYBMD+DP9uvGSIjSUM5uG+0jG15cb8axWpxuOIqrmQjn6scaaH8JwloiP27b2KXA==
+
 locate-path@^3.0.0:
   version "3.0.0"
   resolved "https://registry.npm.taobao.org/locate-path/download/locate-path-3.0.0.tgz#dbec3b3ab759758071b58fe59fc41871af21400e"
@@ -6337,6 +6347,17 @@ pkg-dir@^4.1.0:
   dependencies:
     find-up "^4.0.0"
 
+plyr@^3.6.2:
+  version "3.6.2"
+  resolved "https://registry.yarnpkg.com/plyr/-/plyr-3.6.2.tgz#5a55b608acd161262de1cc75ca843aa64355a051"
+  integrity sha512-CjAhRDtzyGqMRte9Phj4FsZFegS9VxW60boOhQsAnZHuiFG3yVBRcodWsGZ79GuXHHelc4DxMHO+z0QggY+9qQ==
+  dependencies:
+    core-js "^3.6.5"
+    custom-event-polyfill "^1.0.7"
+    loadjs "^4.2.0"
+    rangetouch "^2.0.1"
+    url-polyfill "^1.1.8"
+
 pnp-webpack-plugin@^1.6.4:
   version "1.6.4"
   resolved "https://registry.npm.taobao.org/pnp-webpack-plugin/download/pnp-webpack-plugin-1.6.4.tgz?cache=0&sync_timestamp=1589684269502&other_urls=https%3A%2F%2Fregistry.npm.taobao.org%2Fpnp-webpack-plugin%2Fdownload%2Fpnp-webpack-plugin-1.6.4.tgz#c9711ac4dc48a685dabafc86f8b6dd9f8df84149"
@@ -6930,6 +6951,11 @@ range-parser@^1.2.1, range-parser@~1.2.1:
   resolved "https://registry.npm.taobao.org/range-parser/download/range-parser-1.2.1.tgz#3cf37023d199e1c24d1a55b84800c2f3e6468031"
   integrity sha1-PPNwI9GZ4cJNGlW4SADC8+ZGgDE=
 
+rangetouch@^2.0.1:
+  version "2.0.1"
+  resolved "https://registry.yarnpkg.com/rangetouch/-/rangetouch-2.0.1.tgz#c01105110fd3afca2adcb1a580692837d883cb70"
+  integrity sha512-sln+pNSc8NGaHoLzwNBssFSf/rSYkqeBXzX1AtJlkJiUaVSJSbRAWJk+4omsXkN+EJalzkZhWQ3th1m0FpR5xA==
+
 raw-body@2.4.0:
   version "2.4.0"
   resolved "https://registry.npm.taobao.org/raw-body/download/raw-body-2.4.0.tgz#a1ce6fb9c9bc356ca52e89256ab59059e13d0332"
@@ -8353,6 +8379,11 @@ url-parse@^1.4.3:
     querystringify "^2.1.1"
     requires-port "^1.0.0"
 
+url-polyfill@^1.1.8:
+  version "1.1.10"
+  resolved "https://registry.yarnpkg.com/url-polyfill/-/url-polyfill-1.1.10.tgz#fd5bbcf66c9491fa682b0cb6d6a855e1643a9281"
+  integrity sha512-vSaPpaRgBrf41+Uky1myiSh6gpcbw8FpwHYnEy0abxndojOBnIs+yh/49gKYFLtUMP9qoNWjn6j9aUVy23Ie2A==
+
 url-slug@2.0.0:
   version "2.0.0"
   resolved "https://registry.yarnpkg.com/url-slug/-/url-slug-2.0.0.tgz#a789d5aed4995c0d95af33377ad1d5c68d4d7027"