{"version":3,"sources":["webpack:///./src/views/newAlbum.vue?258f","webpack:///src/views/newAlbum.vue","webpack:///./src/views/newAlbum.vue?770c","webpack:///./src/views/newAlbum.vue","webpack:///./src/components/Cover.vue?7b33","webpack:///src/components/Cover.vue","webpack:///./src/components/Cover.vue?c51e","webpack:///./src/components/Cover.vue","webpack:///./src/components/Cover.vue?536e","webpack:///./src/views/newAlbum.vue?5652"],"names":["render","_vm","this","_h","$createElement","_c","_self","staticClass","_v","_s","$t","_l","album","key","id","attrs","_f","picUrl","name","artist","staticRenderFns","data","albums","components","Cover","created","area","limit","component","class","coverHover","on","$event","focus","clickCoverToPlay","play","goTo","directives","rawName","value","expression","style","stopPropagation","imageUrl","alwaysShowShadow","_e","props","type","fixedSize","playButtonSize","alwaysShowPlayButton","shadowMargin","radius","computed","imageStyles","styles","width","height","borderRadius","playButtonStyles","shadowStyles","backgroundImage","methods","player","playAlbumByID","playlist","playPlaylistByID","playArtistByID","playActions","bind","$router","push"],"mappings":"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","file":"js/chunk-6fbcab9c.a78d0328.js","sourcesContent":["var render = function () {var _vm=this;var _h=_vm.$createElement;var _c=_vm._self._c||_h;return _c('div',{staticClass:\"newAlbum\"},[_c('h1',[_vm._v(_vm._s(_vm.$t(\"home.newAlbum\")))]),_c('div',{staticClass:\"playlist-row\"},[_c('div',{staticClass:\"playlists\"},_vm._l((_vm.albums),function(album){return _c('div',{key:album.id,staticClass:\"item\"},[_c('Cover',{attrs:{\"id\":album.id,\"type\":'album',\"url\":_vm._f(\"resizeImage\")(album.picUrl),\"hoverEffect\":true,\"showBlackShadow\":true}}),_c('div',{staticClass:\"text\"},[_c('div',{staticClass:\"name\"},[_vm._v(_vm._s(album.name))]),_c('div',{staticClass:\"info\"},[_vm._v(_vm._s(album.artist.name))])])],1)}),0)])])}\nvar staticRenderFns = []\n\nexport { render, staticRenderFns }","<template>\n  <div class=\"newAlbum\">\n    <h1>{{ $t(\"home.newAlbum\") }}</h1>\n\n    <div class=\"playlist-row\">\n      <div class=\"playlists\">\n        <div class=\"item\" v-for=\"album in albums\" :key=\"album.id\">\n          <Cover\n            :id=\"album.id\"\n            :type=\"'album'\"\n            :url=\"album.picUrl | resizeImage\"\n            :hoverEffect=\"true\"\n            :showBlackShadow=\"true\"\n          />\n\n          <div class=\"text\">\n            <div class=\"name\">{{ album.name }}</div>\n            <div class=\"info\">{{ album.artist.name }}</div>\n          </div>\n        </div>\n      </div>\n    </div>\n  </div>\n</template>\n\n<script>\nimport { newAlbums } from \"@/api/album\";\nimport NProgress from \"nprogress\";\n\nimport Cover from \"@/components/Cover.vue\";\n\nexport default {\n  data() {\n    return {\n      albums: [],\n    };\n  },\n  components: {\n    Cover,\n  },\n  created() {\n    newAlbums({\n      area: \"EA\",\n      limit: 100,\n    }).then((data) => {\n      this.albums = data.albums;\n      NProgress.done();\n    });\n  },\n};\n</script>\n\n<style lang=\"scss\" scoped>\nh1 {\n  span {\n    color: rgba(0, 0, 0, 0.58);\n  }\n}\n\n.playlist-row {\n  margin-top: 36px;\n  &:first-child {\n    margin-top: 0;\n  }\n}\n.playlists {\n  display: flex;\n  flex-wrap: wrap;\n  margin: {\n    right: -12px;\n    left: -12px;\n  }\n  .index-playlist {\n    margin: 12px 12px 24px 12px;\n  }\n}\n\n.item {\n  margin: 12px 12px 24px 12px;\n  .text {\n    width: 208px;\n    margin-top: 8px;\n    .name {\n      font-size: 16px;\n      font-weight: 600;\n      color: rgba(0, 0, 0, 0.88);\n      line-height: 20px;\n\n      display: -webkit-box;\n      -webkit-box-orient: vertical;\n      -webkit-line-clamp: 2;\n      overflow: hidden;\n    }\n    .info {\n      font-size: 12px;\n      color: rgba(0, 0, 0, 0.68);\n      line-height: 18px;\n      display: -webkit-box;\n      -webkit-box-orient: vertical;\n      -webkit-line-clamp: 2;\n      overflow: hidden;\n      // margin-top: 4px;\n    }\n  }\n}\n</style>\n","import mod from \"-!../../node_modules/cache-loader/dist/cjs.js??ref--11-0!../../node_modules/thread-loader/dist/cjs.js!../../node_modules/babel-loader/lib/index.js!../../node_modules/cache-loader/dist/cjs.js??ref--0-0!../../node_modules/vue-loader/lib/index.js??vue-loader-options!./newAlbum.vue?vue&type=script&lang=js&\"; export default mod; export * from \"-!../../node_modules/cache-loader/dist/cjs.js??ref--11-0!../../node_modules/thread-loader/dist/cjs.js!../../node_modules/babel-loader/lib/index.js!../../node_modules/cache-loader/dist/cjs.js??ref--0-0!../../node_modules/vue-loader/lib/index.js??vue-loader-options!./newAlbum.vue?vue&type=script&lang=js&\"","import { render, staticRenderFns } from \"./newAlbum.vue?vue&type=template&id=12989328&scoped=true&\"\nimport script from \"./newAlbum.vue?vue&type=script&lang=js&\"\nexport * from \"./newAlbum.vue?vue&type=script&lang=js&\"\nimport style0 from \"./newAlbum.vue?vue&type=style&index=0&id=12989328&lang=scss&scoped=true&\"\n\n\n/* normalize component */\nimport normalizer from \"!../../node_modules/vue-loader/lib/runtime/componentNormalizer.js\"\nvar component = normalizer(\n  script,\n  render,\n  staticRenderFns,\n  false,\n  null,\n  \"12989328\",\n  null\n  \n)\n\nexport default component.exports","var render = function () {var _vm=this;var _h=_vm.$createElement;var _c=_vm._self._c||_h;return _c('div',{staticClass:\"cover\",class:{ 'cover-hover': _vm.coverHover },on:{\"mouseover\":function($event){_vm.focus = true},\"mouseleave\":function($event){_vm.focus = false},\"click\":function($event){_vm.clickCoverToPlay ? _vm.play() : _vm.goTo()}}},[_c('div',{staticClass:\"cover-container\"},[_c('div',{staticClass:\"shade\"},[_c('button',{directives:[{name:\"show\",rawName:\"v-show\",value:(_vm.focus),expression:\"focus\"}],staticClass:\"play-button\",style:(_vm.playButtonStyles),on:{\"click\":function($event){$event.stopPropagation();return _vm.play()}}},[_c('svg-icon',{attrs:{\"icon-class\":\"play\"}})],1)]),_c('img',{style:(_vm.imageStyles),attrs:{\"src\":_vm.imageUrl}}),(_vm.coverHover || _vm.alwaysShowShadow)?_c('transition',{attrs:{\"name\":\"fade\"}},[_c('div',{directives:[{name:\"show\",rawName:\"v-show\",value:(_vm.focus || _vm.alwaysShowShadow),expression:\"focus || alwaysShowShadow\"}],staticClass:\"shadow\",style:(_vm.shadowStyles)})]):_vm._e()],1)])}\nvar staticRenderFns = []\n\nexport { render, staticRenderFns }","<template>\n  <div\n    class=\"cover\"\n    @mouseover=\"focus = true\"\n    @mouseleave=\"focus = false\"\n    :class=\"{ 'cover-hover': coverHover }\"\n    @click=\"clickCoverToPlay ? play() : goTo()\"\n  >\n    <div class=\"cover-container\">\n      <div class=\"shade\">\n        <button\n          v-show=\"focus\"\n          class=\"play-button\"\n          @click.stop=\"play()\"\n          :style=\"playButtonStyles\"\n          ><svg-icon icon-class=\"play\" />\n        </button>\n      </div>\n      <img :src=\"imageUrl\" :style=\"imageStyles\" />\n      <transition name=\"fade\" v-if=\"coverHover || alwaysShowShadow\">\n        <div\n          class=\"shadow\"\n          v-show=\"focus || alwaysShowShadow\"\n          :style=\"shadowStyles\"\n        ></div>\n      </transition>\n    </div>\n  </div>\n</template>\n\n<script>\nexport default {\n  props: {\n    id: { type: Number, required: true },\n    type: { type: String, required: true },\n    imageUrl: { type: String, required: true },\n    fixedSize: { type: Number, default: 0 },\n    playButtonSize: { type: Number, default: 22 },\n    coverHover: { type: Boolean, default: true },\n    alwaysShowPlayButton: { type: Boolean, default: true },\n    alwaysShowShadow: { type: Boolean, default: false },\n    clickCoverToPlay: { type: Boolean, default: false },\n    shadowMargin: { type: Number, default: 12 },\n    radius: { type: Number, default: 12 },\n  },\n  data() {\n    return {\n      focus: false,\n    };\n  },\n  computed: {\n    imageStyles() {\n      let styles = {};\n      if (this.fixedSize !== 0) {\n        styles.width = this.fixedSize + \"px\";\n        styles.height = this.fixedSize + \"px\";\n      }\n      if (this.type === \"artist\") styles.borderRadius = \"50%\";\n      return styles;\n    },\n    playButtonStyles() {\n      let styles = {};\n      styles.width = this.playButtonSize + \"%\";\n      styles.height = this.playButtonSize + \"%\";\n      return styles;\n    },\n    shadowStyles() {\n      let styles = {};\n      styles.backgroundImage = `url(${this.imageUrl})`;\n      if (this.type === \"artist\") styles.borderRadius = \"50%\";\n      return styles;\n    },\n  },\n  methods: {\n    play() {\n      const player = this.$store.state.player;\n      const playActions = {\n        album: player.playAlbumByID,\n        playlist: player.playPlaylistByID,\n        artist: player.playArtistByID,\n      };\n      playActions[this.type].bind(player)(this.id);\n    },\n    goTo() {\n      this.$router.push({ name: this.type, params: { id: this.id } });\n    },\n  },\n};\n</script>\n\n<style lang=\"scss\" scoped>\n.cover {\n  position: relative;\n  transition: transform 0.3s;\n}\n.cover-container {\n  position: relative;\n}\nimg {\n  border-radius: 0.75em;\n  width: 100%;\n  user-select: none;\n}\n\n.cover-hover {\n  &:hover {\n    cursor: pointer;\n    /* transform: scale(1.02); */\n  }\n}\n\n.shade {\n  position: absolute;\n  top: 0;\n  height: calc(100% - 3px);\n  width: 100%;\n  background: transparent;\n  display: flex;\n  justify-content: center;\n  align-items: center;\n}\n.play-button {\n  display: flex;\n  justify-content: center;\n  align-items: center;\n  color: white;\n  backdrop-filter: blur(8px);\n  background: rgba(255, 255, 255, 0.14);\n  border: 1px solid rgba(255, 255, 255, 0.08);\n  height: 22%;\n  width: 22%;\n  border-radius: 50%;\n  cursor: default;\n  transition: 0.2s;\n  .svg-icon {\n    height: 44%;\n    margin: {\n      left: 4px;\n    }\n  }\n  &:hover {\n    background: rgba(255, 255, 255, 0.28);\n  }\n  &:active {\n    transform: scale(0.94);\n  }\n}\n\n.shadow {\n  position: absolute;\n  top: 12px;\n  height: 100%;\n  width: 100%;\n  filter: blur(16px) opacity(0.6);\n  transform: scale(0.92, 0.96);\n  z-index: -1;\n  background-size: cover;\n  border-radius: 0.75em;\n}\n\n.fade-enter-active,\n.fade-leave-active {\n  transition: opacity 0.3s;\n}\n.fade-enter, .fade-leave-to /* .fade-leave-active below version 2.1.8 */ {\n  opacity: 0;\n}\n</style>\n","import mod from \"-!../../node_modules/cache-loader/dist/cjs.js??ref--11-0!../../node_modules/thread-loader/dist/cjs.js!../../node_modules/babel-loader/lib/index.js!../../node_modules/cache-loader/dist/cjs.js??ref--0-0!../../node_modules/vue-loader/lib/index.js??vue-loader-options!./Cover.vue?vue&type=script&lang=js&\"; export default mod; export * from \"-!../../node_modules/cache-loader/dist/cjs.js??ref--11-0!../../node_modules/thread-loader/dist/cjs.js!../../node_modules/babel-loader/lib/index.js!../../node_modules/cache-loader/dist/cjs.js??ref--0-0!../../node_modules/vue-loader/lib/index.js??vue-loader-options!./Cover.vue?vue&type=script&lang=js&\"","import { render, staticRenderFns } from \"./Cover.vue?vue&type=template&id=358ddfb0&scoped=true&\"\nimport script from \"./Cover.vue?vue&type=script&lang=js&\"\nexport * from \"./Cover.vue?vue&type=script&lang=js&\"\nimport style0 from \"./Cover.vue?vue&type=style&index=0&id=358ddfb0&lang=scss&scoped=true&\"\n\n\n/* normalize component */\nimport normalizer from \"!../../node_modules/vue-loader/lib/runtime/componentNormalizer.js\"\nvar component = normalizer(\n  script,\n  render,\n  staticRenderFns,\n  false,\n  null,\n  \"358ddfb0\",\n  null\n  \n)\n\nexport default component.exports","export * from \"-!../../node_modules/mini-css-extract-plugin/dist/loader.js??ref--7-oneOf-1-0!../../node_modules/css-loader/dist/cjs.js??ref--7-oneOf-1-1!../../node_modules/vue-loader/lib/loaders/stylePostLoader.js!../../node_modules/postcss-loader/src/index.js??ref--7-oneOf-1-2!../../node_modules/sass-loader/dist/cjs.js??ref--7-oneOf-1-3!../../node_modules/cache-loader/dist/cjs.js??ref--0-0!../../node_modules/vue-loader/lib/index.js??vue-loader-options!./Cover.vue?vue&type=style&index=0&id=358ddfb0&lang=scss&scoped=true&\"","export * from \"-!../../node_modules/mini-css-extract-plugin/dist/loader.js??ref--7-oneOf-1-0!../../node_modules/css-loader/dist/cjs.js??ref--7-oneOf-1-1!../../node_modules/vue-loader/lib/loaders/stylePostLoader.js!../../node_modules/postcss-loader/src/index.js??ref--7-oneOf-1-2!../../node_modules/sass-loader/dist/cjs.js??ref--7-oneOf-1-3!../../node_modules/cache-loader/dist/cjs.js??ref--0-0!../../node_modules/vue-loader/lib/index.js??vue-loader-options!./newAlbum.vue?vue&type=style&index=0&id=12989328&lang=scss&scoped=true&\""],"sourceRoot":""}