add screenshot

src/controls/index.js

@@ -8,6 +8,7 @@ import Time from './time';
 import Volume from './volume';
 import Setting from './setting';
 import Thumbnails from './thumbnails';
+import Screenshot from './screenshot';
 
 let id = 0;
 export default class Controls {
@@ -57,30 +58,36 @@ export default class Controls {
       index: 10
     }));
 
-    this.add(new Subtitle({
+    this.add(new Screenshot({
       disable: false,
       position: 'right',
       index: 20
     }));
 
-    this.add(new Setting({
-      disable: false,
+    this.add(new Subtitle({
+      disable: !this.art.option.subtitle.url,
       position: 'right',
       index: 30
     }));
 
-    this.add(new Pip({
+    this.add(new Setting({
       disable: false,
       position: 'right',
       index: 40
     }));
 
-    this.add(new Fullscreen({
+    this.add(new Pip({
       disable: false,
       position: 'right',
       index: 50
     }));
 
+    this.add(new Fullscreen({
+      disable: false,
+      position: 'right',
+      index: 60
+    }));
+
     this.art.option.controls.forEach(item => {
       this.add(item);
     });

src/controls/screenshot.js

@@ -0,0 +1,38 @@
+import { append, tooltip, secondToTime } from '../utils';
+import icons from '../icons';
+
+export default class Screenshot {
+  constructor(option) {
+    this.option = option;
+  }
+
+  apply(art) {
+    this.art = art;
+    const { events: { proxy }, i18n, notice } = this.art;
+    this.$screenshot = append(this.option.$control, icons.screenshot);
+    tooltip(this.$screenshot, i18n.get('Screenshot'));
+    proxy(this.$screenshot, 'click', () => {
+      try {
+        this.captureFrame();
+      } catch (error) {
+        notice.show(error);
+      }
+    });
+  }
+
+  captureFrame() {
+    const { $video } = this.art.refs;
+    const canvas = document.createElement('canvas');
+    canvas.width = $video.videoWidth;
+    canvas.height = $video.videoHeight;
+    canvas.getContext('2d').drawImage($video, 0, 0);
+    const dataUri = canvas.toDataURL('image/png');
+    const elink = document.createElement('a');
+    elink.style.display = 'none';
+    elink.href = dataUri;
+    elink.download = `${secondToTime($video.currentTime)}.png`;
+    document.body.appendChild(elink);
+    elink.click();
+    document.body.removeChild(elink);
+  }
+}

src/i18n.js

@@ -11,7 +11,8 @@ let i18nMap = {
     'Mute': '静音',
     'Reconnect': '重新连接',
     'Hide subtitle': '隐藏字幕',
-    'Show subtitle': '显示字幕'
+    'Show subtitle': '显示字幕',
+    'Screenshot': '截图'
   },
   'zh-tw': {
     'About author': '關於作者',
@@ -25,7 +26,8 @@ let i18nMap = {
     'Mute': '靜音',
     'Reconnect': '重新連接',
     'Hide subtitle': '隱藏字幕',
-    'Show subtitle': '顯示字幕'
+    'Show subtitle': '顯示字幕',
+    'Screenshot': '截圖'
   }
 };
 

src/icons/index.js

@@ -6,6 +6,7 @@ import volume from './volume.svg';
 import volumeClose from './volume-close.svg';
 import subtitle from './subtitle.svg';
 import subtitleClose from './subtitle-close.svg';
+import screenshot from './screenshot.svg';
 
 const icons = {
   loading,
@@ -15,7 +16,8 @@ const icons = {
   volume,
   volumeClose,
   subtitle,
-  subtitleClose
+  subtitleClose,
+  screenshot
 };
 
 function creatDomFromSvg(map) {

src/icons/screenshot.svg

@@ -0,0 +1,5 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 50 50" style="width: 100%; height: 100%">
+	<g id="surface1">
+		<path d="M 19.402344 6 C 17.019531 6 14.96875 7.679688 14.5 10.011719 L 14.097656 12 L 9 12 C 6.238281 12 4 14.238281 4 17 L 4 38 C 4 40.761719 6.238281 43 9 43 L 41 43 C 43.761719 43 46 40.761719 46 38 L 46 17 C 46 14.238281 43.761719 12 41 12 L 35.902344 12 L 35.5 10.011719 C 35.03125 7.679688 32.980469 6 30.597656 6 Z M 25 17 C 30.519531 17 35 21.480469 35 27 C 35 32.519531 30.519531 37 25 37 C 19.480469 37 15 32.519531 15 27 C 15 21.480469 19.480469 17 25 17 Z M 25 19 C 20.589844 19 17 22.589844 17 27 C 17 31.410156 20.589844 35 25 35 C 29.410156 35 33 31.410156 33 27 C 33 22.589844 29.410156 19 25 19 Z "/>
+	</g>
+</svg>

src/style/subtitle.scss

@@ -9,6 +9,7 @@
         color: #fff;
         text-shadow: 0.5px 0.5px 0.5px rgba(0, 0, 0, 0.5);
         font-size: 20px;
+        pointer-events: none;
     
         p {
             margin: 5px 0;