add copy & view

README.md

@@ -79,6 +79,10 @@
 
 # Change Logs:
 
+#### 2018-08-11
+ - [A] 增加M3u8复制功能以及查看采集时间/分辨率功能 
+ - [U] 调整UI宽度为640px
+
 #### 2018-08-10
  - [A] 自动删除采集超过一定时间的视频,用户可在设置页面自行设置 [dd39c90b](https://github.com/shellvon/zh-downloader/commit/dd39c90b235866b10999c494febced3a1ddee5dc)
  - [U] 优化下载信息的存储结构,进一步提供代码可读性 [65993b5a](https://github.com/shellvon/zh-downloader/commit/65993b5a1eaeb38bce1a2b5cd0f6a536c3f5db6c)

src/background.js

@@ -49,7 +49,9 @@ chrome.webRequest.onBeforeRequest.addListener(
             name: videoName,
             manifest: manifest,
             format: preferedFormat,
-            ...resp.cover_info,
+            width: playlist[quality].width,
+            height: playlist[quality].height,
+            bitrate: playlist[quality].bitrate,
           };
           parsedPlaylist[quality] = videoItem;
           // Update The download Info.

src/components/Playlist.vue

@@ -22,7 +22,10 @@
               </el-form-item>
               <el-form-item label="M3U8地址:">
                 <span>
-                  <a class="link" :href="props.row.playlist[props.row.currentQuality].m3u8" target="_blank">点击查看</a>
+                  <el-tooltip class="item" effect="dark" :content="props.row.playlist[props.row.currentQuality].m3u8" placement="bottom">
+                    <a class="link" :href="props.row.playlist[props.row.currentQuality].m3u8" target="_blank">打开</a>
+                  </el-tooltip>
+                  <a class="link" href="javascript:void(0);" @click="copy(props.row.playlist[props.row.currentQuality].m3u8)">复制</a>
                 </span>
               </el-form-item>
               <el-form-item label="视频长度:">
@@ -34,6 +37,12 @@
               <el-form-item label="视频大小:">
                 <span>{{ props.row.playlist[props.row.currentQuality].size | bytesToSize}}</span>
               </el-form-item>
+              <el-form-item label="分辨率:">
+                <span>{{ props.row.playlist[props.row.currentQuality].width }} x {{ props.row.playlist[props.row.currentQuality].height }}</span>
+              </el-form-item>
+              <el-form-item label="采集时间:">
+                <span>{{ new Date(props.row.updatedAt).toLocaleString()}}</span>
+              </el-form-item>
             </el-form>
           </template>
         </el-table-column>
@@ -111,6 +120,28 @@ export default {
     ...mapGetters(['playlist']),
   },
   methods: {
+    /**
+     * 复制
+     */
+    copy(text) {
+      let self = this;
+      navigator.clipboard
+        .writeText(text)
+        .then(() => {
+          self.$message({
+            showClose: true,
+            message: '已成功复制到粘贴板',
+            type: 'success',
+          });
+        })
+        .catch(() => {
+          self.$message({
+            showClose: true,
+            message: '抱歉,复制失败~请尝试打开此链接Ctrl-C进行复制',
+            type: 'error',
+          });
+        });
+    },
     /**
      * 来自父组件通知的信息,当后台某个视频被采集到的消息
      *

src/popup/App.vue

@@ -14,7 +14,7 @@
 
 <style>
 body {
-  width: 600px;
+  width: 640px;
 }
 
 .link {