✨Add copy button to video page

src/assets/style/theme/acrou/index.scss

@@ -1,11 +1,12 @@
 @font-face {
-  font-family: 'iconfont';  /* project id 1760192 */
+  font-family: "iconfont"; /* project id 1760192 */
-  src: url('//at.alicdn.com/t/font_1760192_tl9awsq3di.eot');
+  src: url("//at.alicdn.com/t/font_1760192_tl9awsq3di.eot");
-  src: url('//at.alicdn.com/t/font_1760192_tl9awsq3di.eot?#iefix') format('embedded-opentype'),
+  src: url("//at.alicdn.com/t/font_1760192_tl9awsq3di.eot?#iefix")
-  url('//at.alicdn.com/t/font_1760192_tl9awsq3di.woff2') format('woff2'),
+      format("embedded-opentype"),
-  url('//at.alicdn.com/t/font_1760192_tl9awsq3di.woff') format('woff'),
+    url("//at.alicdn.com/t/font_1760192_tl9awsq3di.woff2") format("woff2"),
-  url('//at.alicdn.com/t/font_1760192_tl9awsq3di.ttf') format('truetype'),
+    url("//at.alicdn.com/t/font_1760192_tl9awsq3di.woff") format("woff"),
-  url('//at.alicdn.com/t/font_1760192_tl9awsq3di.svg#iconfont') format('svg');
+    url("//at.alicdn.com/t/font_1760192_tl9awsq3di.ttf") format("truetype"),
+    url("//at.alicdn.com/t/font_1760192_tl9awsq3di.svg#iconfont") format("svg");
 }
 
 body {
@@ -180,14 +181,24 @@ body {
   left: 7px;
 }
 
-
 // bulma-divider
 .is-divider,
 .is-divider-vertical {
-  border-top: .1rem solid #f5f5f5;
+  border-top: 0.1rem solid #f5f5f5;
 }
 
 .is-divider-vertical[data-content]::after,
 .is-divider[data-content]::after {
   color: #919191;
 }
+
+.index-button-copy {
+  background: 0 0;
+  border: none;
+  color: #4a4a4a;
+  cursor: pointer;
+  font-size: 0.625rem;
+  outline: 0;
+  padding-bottom: 0;
+  padding-top: 0;
+}

src/locales/en.json

@@ -7,6 +7,7 @@
     "title": "Notify"
   },
   "copy": {
+    "text": "Copy",
     "success": "Copy successful",
     "error": "Copy failed"
   },

src/locales/zh-chs.json

@@ -7,6 +7,7 @@
     "title": "提示"
   },
   "copy": {
+    "text": "复制",
     "success": "复制成功",
     "error": "复制失败"
   },

src/locales/zh-cht.json

@@ -7,6 +7,7 @@
     "title": "提示"
   },
   "copy": {
+    "text": "復制",
     "success": "復制成功",
     "error": "復制失敗"
   },

src/views/page/GoList.vue

@@ -247,21 +247,7 @@ export default {
     copy(path) {
       let origin = window.location.origin;
       path = origin + encodeURI(path);
-      this.$copyText(path)
+      this.$copyText(path);
-        .then(() => {
-          this.$notify({
-            title: "notify.title",
-            message: "copy.success",
-            type: "success",
-          });
-        })
-        .catch(() => {
-          this.$notify({
-            title: "notify.title",
-            message: "copy.error",
-            type: "error"
-          });
-        });
     },
     thum(url) {
       return url ? `/${this.$route.params.id}:view?url=${url}` : "";

src/views/page/GoVideo.vue

@@ -18,7 +18,13 @@
       <vue-plyr ref="plyr" :options="options">
         <video controls crossorigin playsinline>
           <source :src="videoUrl" type="video/mp4" />
-          <track kind="captions" :src="subtitle" default />
+          <track
+            kind="captions"
+            label="Default"
+            srclang="default"
+            :src="subtitle"
+            default
+          />
         </video>
       </vue-plyr>
     </div>
@@ -38,7 +44,12 @@
       <div class="card-content">
         <div class="content">
           <div class="field">
-            <label class="label">{{ $t("page.video.link") }}</label>
+            <label class="label">
+              {{ $t("page.video.link") }}
+              <a class="button is-text index-button-copy" @click="copy">
+                {{ $t("copy.text") }}
+              </a>
+            </label>
             <div class="control">
               <input class="input" type="text" :value="downloadUrl" />
             </div>
@@ -117,6 +128,9 @@ export default {
     loadSub(path, index) {
       this.subtitle = path.substring(0, index) + ".vtt";
     },
+    copy() {
+      this.$copyText(this.downloadUrl);
+    },
   },
   computed: {
     options() {
@@ -141,7 +155,8 @@ export default {
           "download",
           "fullscreen",
         ],
-        settings: options.settings || ["quality", "speed", "loop"]
+        settings: options.settings || ["quality", "speed", "loop"],
+        captions: { active: true, language: "default", ...options.captions },
       };
     },
     player() {