From c042faa001153eb0c1cdfd9c7375b07caa9fa920 Mon Sep 17 00:00:00 2001 From: Hawtim Zhang 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 | 2235 ++++++++++++++++-------------- 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, 1755 insertions(+), 1445 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 @@ + + + + + + + <%= htmlWebpackPlugin.options.title %> + - - - - - - - <%= htmlWebpackPlugin.options.title %> - - - - -
- - - - \ No newline at end of file + + +
+ + + 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; - } - } + }, + }, }; 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 + 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 .35s cubic-bezier(.4, 0, .2, 1), width .35s cubic-bezier(.4, 0, .2, 1) +.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% + 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 > 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 + 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 .3s ease; - width: 100% +.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 .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-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, .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"]::-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 .3s ease; - transition: box-shadow .3s ease; - user-select: none +.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, .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-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"]::-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-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 .3s ease; - transition: box-shadow .3s ease; - -ms-user-select: none; - user-select: none +.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 .3s ease; - transition: box-shadow .3s ease; - -ms-user-select: none; - user-select: none; - background: currentColor +.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, .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-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"]::-ms-tooltip { + display: none; } -.plyr--full-ui input[type=range]:focus { - outline: 0 +.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"]::-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::-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::-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--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 + 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, +.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 * .7)); - left: calc((var(--plyr-control-icon-size, 18px)/ 2) + calc(var(--plyr-control-spacing, 10px) * .7)) +.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(.8); - transform-origin: 100% 100% +.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 * .7)); - right: calc((var(--plyr-control-icon-size, 18px)/ 2) + calc(var(--plyr-control-spacing, 10px) * .7)); - transform: translateX(50%) +.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__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--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"]::-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, .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, 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, .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, 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, .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::-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, .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, 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, .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, 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 + 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) - } +@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 + 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"]::-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, .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, 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, .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, 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, .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::-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, .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, 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, .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, 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"; - } - } + }, + }, }; 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); - } - } + }, + }, }; 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 }); - } - } + }, + }, }; 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); } }); - } - } + }, + }, }; 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 }}
@@ -59,7 +62,7 @@ icon-class="heart" :style="{ visibility: - focus && !isLiked && track.playable ? 'visible' : 'hidden' + focus && !isLiked && track.playable ? 'visible' : 'hidden', }" > @@ -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" }; - } + }, }; 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.
Your password will be MD5 encrypted locally and then transmitted to NetEase Cloud API.
- YesPlayMusic is not the official website of NetEase Cloud Music, please consider carefully before entering account information. You can also go to YesPlayMusic's GitHub repository 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 YesPlayMusic's GitHub repository 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 { YesPlayMusic 的 GitHub 源代码仓库 - 自行构建并使用自托管的网易云 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 @@ {{ new Date(album.publishTime).getFullYear() }} - · {{ album.size }} {{ $t("common.songs") }}, + · {{ album.size }} {{ $t("common.songs") }}, {{ albumTime | formatTime("Human") }}
{{ album.description }}
-
+
{{ album.description }} - {{ $t('modal.close') }} + {{ $t("modal.close") }}
@@ -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); - } - } + }, + }, }; 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 @@
{{ artist.name }}
{{ $t("artist.artist") }}
- {{ artist.musicSize }} {{ $t("common.songs") }} · + {{ artist.musicSize }} {{ $t("common.songs") }} · {{ artist.albumSize }} {{ $t("artist.withAlbums") }} · {{ artist.mvSize }} {{ $t("artist.videos") }}
@@ -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); - } + }, }; 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 @@