{"version":3,"sources":["webpack:///./src/views/playlists/PlaylistDetail.vue?dcf6","webpack:///./src/components/pure-com/Tags.vue?d9a2","webpack:///./src/views/playlists/PlaylistDetail.vue?3dc0","webpack:///./src/components/pure-com/Tags.vue?a4a8","webpack:///src/components/pure-com/Tags.vue","webpack:///./src/components/pure-com/Tags.vue?ccf7","webpack:///./src/components/pure-com/Tags.vue","webpack:///src/views/playlists/PlaylistDetail.vue","webpack:///./src/views/playlists/PlaylistDetail.vue?d6fa","webpack:///./src/views/playlists/PlaylistDetail.vue"],"names":["render","_vm","this","_h","$createElement","_c","_self","staticClass","directives","name","rawName","value","$helpers","getSmallPicture","info","coverImgUrl","expression","attrs","_v","_s","creator","avatarUrl","nickname","formatTime","createTime","_e","encloseNumber","subscribedCount","shareCount","commentCount","tags","description","formatNumberWithTS","playCount","tracks","comments","length","_l","item","key","time","content","user","likedCount","person","id","similarPls","pl","on","$event","gotoRoute","staticRenderFns","tag","index","colors","component","data","subscribers","playlistId","components","Tags","GroupButtons","TracksTable","Comment","methods","$router","push","watch"],"mappings":"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","file":"js/playlists-detail.51f92470.js","sourcesContent":["export * from \"-!../../../node_modules/mini-css-extract-plugin/dist/loader.js??ref--8-oneOf-1-0!../../../node_modules/css-loader/dist/cjs.js??ref--8-oneOf-1-1!../../../node_modules/vue-loader/lib/loaders/stylePostLoader.js!../../../node_modules/postcss-loader/src/index.js??ref--8-oneOf-1-2!../../../node_modules/sass-loader/dist/cjs.js??ref--8-oneOf-1-3!../../../node_modules/cache-loader/dist/cjs.js??ref--0-0!../../../node_modules/vue-loader/lib/index.js??vue-loader-options!./PlaylistDetail.vue?vue&type=style&index=0&id=6c0901d2&lang=scss&scoped=true&\"","export * from \"-!../../../node_modules/mini-css-extract-plugin/dist/loader.js??ref--8-oneOf-1-0!../../../node_modules/css-loader/dist/cjs.js??ref--8-oneOf-1-1!../../../node_modules/vue-loader/lib/loaders/stylePostLoader.js!../../../node_modules/postcss-loader/src/index.js??ref--8-oneOf-1-2!../../../node_modules/sass-loader/dist/cjs.js??ref--8-oneOf-1-3!../../../node_modules/cache-loader/dist/cjs.js??ref--0-0!../../../node_modules/vue-loader/lib/index.js??vue-loader-options!./Tags.vue?vue&type=style&index=0&id=7145c112&lang=scss&scoped=true&\"","var render = function () {var _vm=this;var _h=_vm.$createElement;var _c=_vm._self._c||_h;return _c('div',{staticClass:\"playlist\"},[_c('div',{staticClass:\"pl-wrapper\"},[_c('div',{staticClass:\"top-info\"},[_c('div',{staticClass:\"pl-detail\"},[_c('div',{staticClass:\"img-wrapper\"},[_c('img',{directives:[{name:\"lazy\",rawName:\"v-lazy\",value:(_vm.$helpers.getSmallPicture(_vm.info.coverImgUrl, 208)),expression:\"$helpers.getSmallPicture(info.coverImgUrl, 208)\"}],staticClass:\"pl-image\",attrs:{\"alt\":\"\"}})]),_c('div',{staticClass:\"pl-details\"},[_c('h3',{staticClass:\"name\"},[_vm._v(_vm._s(_vm.info.name))]),_c('div',{staticClass:\"creator\"},[_c('img',{directives:[{name:\"lazy\",rawName:\"v-lazy\",value:(_vm.$helpers.getSmallPicture(_vm.creator.avatarUrl, 30)),expression:\"$helpers.getSmallPicture(creator.avatarUrl, 30)\"}],staticClass:\"avatar\",attrs:{\"alt\":\"\"}}),_c('span',{staticClass:\"username\"},[_vm._v(_vm._s(_vm.creator.nickname))]),(_vm.info.createTime)?_c('span',{staticClass:\"date\"},[_vm._v(\" \"+_vm._s(\"created at \" + _vm.$helpers.formatTime(_vm.info.createTime, 'date')))]):_vm._e()]),_c('GroupButtons',{attrs:{\"subCount\":_vm.$helpers.encloseNumber(_vm.info.subscribedCount),\"shareCount\":_vm.$helpers.encloseNumber(_vm.info.shareCount),\"commentCount\":_vm.$helpers.encloseNumber(_vm.info.commentCount)}}),_c('Tags',{attrs:{\"size\":'mini',\"data\":_vm.info.tags}}),_c('div',{staticClass:\"description\"},[_vm._v(\"Description: \"+_vm._s(_vm.info.description))])],1)])]),_c('TracksTable',{attrs:{\"showTitle\":true,\"playCount\":_vm.$helpers.formatNumberWithTS(_vm.info.playCount),\"tableData\":_vm.tracks}}),_c('div',{staticClass:\"pl-comments\"},[_c('h1',{staticClass:\"comments-title\"},[_vm._v(_vm._s(_vm.comments.length + \" Comments\"))]),_vm._l((_vm.comments),function(item){return _c('Comment',{key:item.time,attrs:{\"content\":item.content,\"name\":item.user.nickname,\"avatar\":item.user.avatarUrl,\"likedCount\":item.likedCount,\"time\":item.time}})})],2)],1),_c('div',{staticClass:\"pl-related\"},[_c('div',{staticClass:\"people\"},[_c('div',{staticClass:\"title\"},[_vm._v(\"Followers\")]),_c('div',{staticClass:\"avatars\"},_vm._l((_vm.subscribers),function(person){return _c('img',{directives:[{name:\"lazy\",rawName:\"v-lazy\",value:(_vm.$helpers.getSmallPicture(person.avatarUrl, 40)),expression:\"$helpers.getSmallPicture(person.avatarUrl, 40)\"}],key:person.id,attrs:{\"title\":person.nickname,\"alt\":\"\"}})}),0)]),(_vm.similarPls.length > 0)?_c('div',{staticClass:\"related\"},[_c('div',{staticClass:\"title\"},[_vm._v(\"Similar Playlists\")]),_c('div',{staticClass:\"simi-pls\"},_vm._l((_vm.similarPls),function(pl){return _c('div',{key:pl.id,staticClass:\"one-pl\",on:{\"click\":function($event){return _vm.gotoRoute(pl.id)}}},[_c('img',{directives:[{name:\"lazy\",rawName:\"v-lazy\",value:(_vm.$helpers.getSmallPicture(pl.coverImgUrl, 80)),expression:\"$helpers.getSmallPicture(pl.coverImgUrl, 80)\"}],attrs:{\"alt\":\"\"}}),_c('div',{staticClass:\"source\"},[_c('span',{staticClass:\"name\"},[_vm._v(_vm._s(pl.name))]),_c('span',{staticClass:\"username\"},[_vm._v(\"by \"+_vm._s(pl.creator.nickname))])])])}),0)]):_vm._e()])])}\nvar staticRenderFns = []\n\nexport { render, staticRenderFns }","var render = function () {var _vm=this;var _h=_vm.$createElement;var _c=_vm._self._c||_h;return _c('div',{staticClass:\"tags\"},[_c('span',[_vm._v(\"Tags: \")]),_c('span',{staticClass:\"tag\"},_vm._l((_vm.data),function(tag,index){return _c('el-tag',{key:tag,attrs:{\"size\":\"size\",\"effect\":\"dark\",\"type\":_vm.colors[index % 4]}},[_vm._v(_vm._s(tag)+\" \")])}),1)])}\nvar staticRenderFns = []\n\nexport { render, staticRenderFns }","<template>\n\t<div class=\"tags\">\n\t\t<span>Tags: </span>\n\t\t<span class=\"tag\">\n\t\t\t<el-tag size=\"size\" effect=\"dark\" v-for=\"(tag, index) in data\" :type=\"colors[index % 4]\" :key=\"tag\"\n\t\t\t\t>{{ tag }}\n\t\t\t</el-tag>\n\t\t</span>\n\t</div>\n</template>\n\n<script>\nexport default {\n\tname: \"Tags\",\n\tprops: {\n\t\tdata: Array,\n\t\tsize: String,\n\t},\n\n\tdata() {\n\t\treturn {\n\t\t\tcolors: [\"success\", \"info\", \"warning\", \"danger\"],\n\t\t};\n\t},\n};\n</script>\n\n<style lang=\"scss\" scoped>\n.tags {\n\tfont-size: 14px;\n\t/deep/.el-tag {\n\t\tmargin: 0 5px !important;\n\t}\n}\n</style>\n","import mod from \"-!../../../node_modules/cache-loader/dist/cjs.js??ref--12-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!./Tags.vue?vue&type=script&lang=js&\"; export default mod; export * from \"-!../../../node_modules/cache-loader/dist/cjs.js??ref--12-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!./Tags.vue?vue&type=script&lang=js&\"","import { render, staticRenderFns } from \"./Tags.vue?vue&type=template&id=7145c112&scoped=true&\"\nimport script from \"./Tags.vue?vue&type=script&lang=js&\"\nexport * from \"./Tags.vue?vue&type=script&lang=js&\"\nimport style0 from \"./Tags.vue?vue&type=style&index=0&id=7145c112&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  \"7145c112\",\n  null\n  \n)\n\nexport default component.exports","<template>\n  <div class=\"playlist\">\n    <!-- Left Part -->\n    <div class=\"pl-wrapper\">\n      <!-- Page Left Part contains three parts vertically -->\n      <div class=\"top-info\">\n        <div class=\"pl-detail\">\n          <div class=\"img-wrapper\">\n            <img class=\"pl-image\" v-lazy=\"$helpers.getSmallPicture(info.coverImgUrl, 208)\" alt=\"\" />\n          </div>\n          <div class=\"pl-details\">\n            <h3 class=\"name\">{{ info.name }}</h3>\n            <div class=\"creator\">\n              <img v-lazy=\"$helpers.getSmallPicture(creator.avatarUrl, 30)\" alt=\"\" class=\"avatar\" />\n              <span class=\"username\">{{ creator.nickname }}</span>\n              <span class=\"date\" v-if=\"info.createTime\">\n                {{ `created at ` + $helpers.formatTime(info.createTime, 'date') }}</span>\n            </div>\n            <GroupButtons :subCount=\"$helpers.encloseNumber(info.subscribedCount)\"\n              :shareCount=\"$helpers.encloseNumber(info.shareCount)\"\n              :commentCount=\"$helpers.encloseNumber(info.commentCount)\" />\n            <Tags :size=\"'mini'\" :data=\"info.tags\" />\n\n            <div class=\"description\">Description: {{ info.description }}</div>\n          </div>\n        </div>\n      </div>\n      <!-- Left Middle Part: Playlist(tracks) -->\n      <TracksTable :showTitle=\"true\" :playCount=\"$helpers.formatNumberWithTS(info.playCount)\" :tableData=\"tracks\" />\n\n      <!-- Left Bottom Part: Comments-->\n      <div class=\"pl-comments\">\n        <h1 class=\"comments-title\">{{ comments.length + \" Comments\" }}</h1>\n        <Comment v-for=\"item in comments\" :key=\"item.time\" :content=\"item.content\" :name=\"item.user.nickname\"\n          :avatar=\"item.user.avatarUrl\" :likedCount=\"item.likedCount\" :time=\"item.time\"></Comment>\n      </div>\n    </div>\n    <!-- Right Part -->\n    <div class=\"pl-related\">\n      <div class=\"people\">\n        <div class=\"title\">Followers</div>\n        <div class=\"avatars\">\n          <img v-for=\"person in subscribers\" v-lazy=\"$helpers.getSmallPicture(person.avatarUrl, 40)\"\n            :title=\"person.nickname\" alt=\"\" :key=\"person.id\" />\n        </div>\n      </div>\n      <div class=\"related\" v-if=\"similarPls.length > 0\">\n        <div class=\"title\">Similar Playlists</div>\n        <div class=\"simi-pls\">\n          <div class=\"one-pl\" v-for=\"pl in similarPls\" :key=\"pl.id\" @click=\"gotoRoute(pl.id)\">\n            <img v-lazy=\"$helpers.getSmallPicture(pl.coverImgUrl, 80)\" alt=\"\" />\n            <div class=\"source\">\n              <span class=\"name\">{{ pl.name }}</span>\n              <span class=\"username\">by {{ pl.creator.nickname }}</span>\n            </div>\n          </div>\n        </div>\n      </div>\n    </div>\n  </div>\n</template>\n\n<script>\nimport {\n  getPlaylistDetail,\n  getPlaylistComments,\n  getSimilarPlaylists\n} from \"@/network/request\";\nimport GroupButtons from \"@/components/pure-com/GroupButtons\";\nimport Tags from \"@/components/pure-com/Tags\";\nimport TracksTable from \"@/components/pure-com/TracksTable\";\nimport Comment from \"@/components/pure-com/Comment\";\n\nexport default {\n  data() {\n    return {\n      info: [],\n      tracks: [],\n      comments: [],\n      creator: {},\n      subscribers: [],\n      similarPls: [], //similar playlists\n      playlistId: 0\n    };\n  },\n\n  components: {\n    Tags,\n    GroupButtons,\n    TracksTable,\n    Comment\n  },\n\n  methods: {\n    async getPlaylistInfo(playlistId) {\n      let { data } = await getPlaylistDetail({ id: playlistId });\n\n      let {\n        subscribedCount,\n        createTime,\n        updateTime,\n        coverImgUrl,\n        commentThreadId,\n        trackUpdateTime,\n        trackCount,\n        playCount,\n        description,\n        name,\n        id,\n        shareCount,\n        commentCount\n      } = data.playlist;\n\n      this.info = {\n        subscribedCount,\n        createTime,\n        updateTime,\n        coverImgUrl,\n        commentThreadId,\n        trackUpdateTime,\n        trackCount,\n        playCount,\n        description,\n        name,\n        id,\n        shareCount,\n        commentCount\n      };\n\n      this.info.tags = data.playlist.tags; //tags is an array\n\n      this.tracks = [];\n      data.playlist.tracks.forEach(item => {\n        let { name, id, dt: duration } = item;\n        duration = this.$helpers.convertMsToMinutes(duration);\n        let album = item.al; //item.al.name;\n        let artists = item.ar; //item.ar[0].name;\n        let coverUrl = item.al.picUrl;\n        this.tracks.push({ id, name, duration, album, artists, coverUrl });\n      });\n\n      let { avatarUrl, nickname, signature } = data.playlist.creator;\n      this.creator = { avatarUrl, nickname, signature };\n\n      data.playlist.subscribers.forEach(item => {\n        let { userId, avatarUrl, nickname, signature } = item;\n        this.subscribers.push({ userId, avatarUrl, nickname, signature });\n      });\n\n      let res = await getSimilarPlaylists({ id: playlistId });\n      this.similarPls = res.data.playlists;\n\n      res = await getPlaylistComments({ id: playlistId });\n      this.comments = res.data.comments;\n    },\n\n    gotoRoute(id) {\n      this.playlistId = id;\n      this.$router.push({ path: \"/playlists/detail\", query: { id } });\n    }\n  },\n\n  watch: {\n    async playlistId(newId) {\n      await this.getPlaylistInfo(newId);\n    }\n  },\n\n  async created() {\n    this.playlistId = this.$route.query.id;\n    await this.getPlaylistInfo(this.playlistId);\n  }\n};\n</script>\n\n<style lang=\"scss\" scoped>\n@import \"@/assets/styles/mixin.scss\";\n@import \"@/assets/styles/variables.scss\";\n\n.playlist {\n  padding-top: 20px;\n  @include flex-align(row, flex-start, flex-start);\n}\n\n// Left Part -- Top area styles\n.pl-wrapper {\n  flex: 1;\n  min-width: 300px;\n\n  // Left Part Styles\n  .pl-detail {\n    width: 800px;\n    margin: 0 auto;\n    @include flex-align(row, flex-start);\n\n    .img-wrapper {\n      width: 208px;\n      height: 208px;\n      margin-right: 15px;\n    }\n\n    .pl-details {\n      height: 208px;\n      padding: 3px 0;\n      text-align: left;\n      @include flex-align(column, space-between, flex-start);\n      .name {\n        font-weight: bold;\n        padding-top: 3px;\n      }\n\n      .creator {\n        @include flex-align(row, flex-start);\n        font-size: 13px;\n        img {\n          border-radius: 50%;\n        }\n\n        .username {\n          color: #517eaf;\n        }\n\n        span {\n          padding-left: 10px;\n        }\n      }\n\n      .description {\n        font-size: 13px;\n        line-height: 1.5;\n        max-lines: 2;\n        @include text-ellipsis-ml(2);\n      }\n    }\n  }\n\n  // Left Part -- Bottome comments styles\n  .pl-comments {\n    margin: 30px 0;\n    text-align: left;\n    .comments-title {\n      margin: 10px 0;\n      font-weight: bold;\n    }\n  }\n}\n\n// Right Part styles\n.pl-related {\n  width: 280px;\n  padding-bottom: 20px;\n  margin-left: 20px;\n  flex-shrink: 0;\n\n  .title {\n    font-size: 13px;\n    font-weight: bold;\n    text-align: left;\n    padding-bottom: 10px;\n    border-bottom: 1.5px solid gray;\n    margin-bottom: 10px;\n  }\n\n  .avatars {\n    width: 100%;\n    @include grid-align-cards(40px, 5px);\n    img {\n      border-radius: 50%;\n    }\n    row-gap: 5px;\n  }\n\n  .related {\n    margin-top: 20px;\n    .one-pl {\n      @include flex-align(row, flex-start);\n      margin-bottom: 10px;\n      cursor: pointer;\n\n      img {\n        width: 80px;\n      }\n\n      .source {\n        height: 80px;\n        padding: 5px 0 5px 10px;\n        text-align: left;\n\n        @include flex-align(column, space-between, flex-start);\n        .name {\n          font-size: 14px;\n          font-weight: bold;\n        }\n        .username {\n          font-size: 13px;\n        }\n      }\n    }\n  }\n}\n</style>\n","import mod from \"-!../../../node_modules/cache-loader/dist/cjs.js??ref--12-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!./PlaylistDetail.vue?vue&type=script&lang=js&\"; export default mod; export * from \"-!../../../node_modules/cache-loader/dist/cjs.js??ref--12-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!./PlaylistDetail.vue?vue&type=script&lang=js&\"","import { render, staticRenderFns } from \"./PlaylistDetail.vue?vue&type=template&id=6c0901d2&scoped=true&\"\nimport script from \"./PlaylistDetail.vue?vue&type=script&lang=js&\"\nexport * from \"./PlaylistDetail.vue?vue&type=script&lang=js&\"\nimport style0 from \"./PlaylistDetail.vue?vue&type=style&index=0&id=6c0901d2&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  \"6c0901d2\",\n  null\n  \n)\n\nexport default component.exports"],"sourceRoot":""}