Bilibili-Evolved/min/video-card.vue.min.js
2019-09-15 13:32:20 +08:00

1 line
4.8 KiB
JavaScript

(()=>{return(e,i)=>{const t=`<a class=video-card target=_blank :href="'https://www.bilibili.com/av' + aid"><div class=cover-container><dpi-img class=cover :src=coverUrl :size="{height: 120, width: 200}"></dpi-img><div class=duration>{{durationText}}</div><div class=watchlater @click.stop.prevent=toggleWatchlater()><i class=mdi :class="{'mdi-clock-outline': !watchlater, 'mdi-check-circle': watchlater}"></i>{{watchlater ? '已添加' : '稍后再看'}}</div></div><h1 class=title :title=title>{{title}}</h1><div class=topics v-if="topics && topics.length"><a class=topic v-for="topic of topics.slice(0,3)":key=topic.id target=_blank :href="'https://t.bilibili.com/topic/name/' + topic.name + '/feed'">#{{topic.name}}#</a></div><pre class="description single-line":title=description v-else>{{description}}</pre><a class=up :class="{'no-face': !upFaceUrl}"target=_blank :href="'https://space.bilibili.com/' + upID"><dpi-img v-if=upFaceUrl class=face :src=upFaceUrl :size=24></dpi-img><icon v-else icon=up type=extended></icon><div class=name :title=upName>{{upName}}</div></a><div class=stats><template v-if=like><icon type=extended icon=like-outline></icon>{{like}}</template><template v-if=coins><icon type=home icon=coin-outline></icon>{{coins}}</template><template v-if=favorites><icon type=home icon=favorites-outline></icon>{{favorites}}</template><icon type=extended icon=play></icon>{{playCount}}<template v-if=danmakuCount><icon type=extended icon=danmaku></icon>{{danmakuCount}}</template></div></a>`;i.applyStyleFromText(`.video-card{display:grid;grid-template-columns:200px 1fr;grid-template-rows:3fr 2fr 3fr;grid-template-areas:"cover title" "cover description" "cover up";height:var(--card-height);width:var(--card-width);color:#000;border-radius:16px;box-shadow:0 2px 6px 0 #0002;margin-right:var(--card-margin);margin-bottom:var(--card-margin);position:relative}body.dark .video-card{background-color:#282828;color:#fff}.video-card>*{justify-self:self-start;align-self:center}.video-card:hover{transform:scale(1.02);transition:.1s cubic-bezier(.39,.58,.57,1)}.video-card:hover .duration,.video-card:hover .watchlater{opacity:1}.video-card .duration,.video-card .watchlater{opacity:0}.video-card .cover-container{grid-area:cover;position:relative}.video-card .cover-container .cover{border-radius:16px 0 0 16px;object-fit:cover}.video-card .cover-container>:not(.cover){position:absolute}.video-card .cover-container .duration,.video-card .cover-container .watchlater{bottom:6px;padding:4px 8px;background-color:#000a;color:#fff;border-radius:14px;height:24px}.video-card .cover-container .duration .mdi,.video-card .cover-container .watchlater .mdi{font-size:12pt;line-height:1;margin-right:4px}.video-card .cover-container .duration{left:6px}.video-card .cover-container .watchlater{right:6px;display:flex;align-items:center;padding-left:4px}.video-card .title{grid-area:title;font-size:12pt;font-weight:700;color:inherit;padding:0 12px;white-space:nowrap;overflow:hidden;justify-self:stretch;text-overflow:ellipsis}.video-card .topics{grid-area:description;display:flex;align-items:center;margin-left:12px}.video-card .topics .topic{color:inherit;padding:4px 8px;background-color:#8882;margin-right:8px;border-radius:14px}.video-card .description{grid-area:description;color:inherit;overflow:auto;align-self:stretch;justify-self:stretch;margin:0 12px;white-space:pre-wrap;line-height:1.5;scrollbar-width:none!important}.video-card .description::-webkit-scrollbar{width:0!important}.video-card .description.single-line{overflow:hidden;white-space:nowrap;text-overflow:ellipsis}.video-card .stats,.video-card .up{grid-area:up}.video-card .up{margin-left:12px;display:flex;align-items:center;padding:2px;background-color:#8882;border-radius:14px;color:inherit}.video-card .up.no-face{background-color:transparent;padding:0}.video-card .up.no-face .be-icon{font-size:14pt;opacity:.75}.video-card .up .face{border-radius:50%}.video-card .up .name{margin:0 8px}.video-card .up:hover .name{color:var(--theme-color)}.video-card .stats{justify-self:self-end;margin-right:12px;display:flex;align-items:center;opacity:.5}.video-card .stats .be-icon{font-size:12pt;margin:0 4px 0 12px}.video-card .stats .be-icon.be-iconfont-favorites-outline{font-size:14pt}.video-card .stats .be-icon.be-iconfont-coin-outline{font-size:11pt}`,"video-card-style");return{export:Object.assign({template:t},{props:["data"],components:{"dpi-img":()=>i.importAsync("dpi-img.vue"),Icon:()=>i.importAsync("icon.vue")},data(){return{upFaceUrl:"",danmakuCount:"",like:"",coins:"",favorites:"",dynamic:"",topics:[],...this.data}},methods:{async toggleWatchlater(){try{this.watchlater=!this.watchlater;const{toggleWatchlater:e}=await i.importAsync("watchlater-api");e(this.aid.toString(),this.watchlater)}catch(e){this.watchlater=!this.watchlater;Toast.error(e.message,"稍后再看操作失败",3e3)}}}})}}})();