添加全屏控制器

src/controls/fullscreen-web.js

@@ -8,10 +8,14 @@ export default class FullscreenWeb {
   }
 
   apply(art, $control) {
-    const { events: { proxy }, i18n, player, refs: { $player } } = art;
+    const { events: { proxy }, i18n, player, controls, refs: { $player } } = art;
     this.$fullscreenWeb = append($control, icons.fullscreenWeb);
     tooltip(this.$fullscreenWeb, i18n.get('Web fullscreen'));
     proxy($control, 'click', () => {
+      if (controls.fullscreen) {
+        controls.fullscreen.exit();
+      }
+
       if (this.state) {
         this.state = false;
         $player.classList.remove('artplayer-web-fullscreen');

src/controls/fullscreen.js

@@ -1,9 +1,47 @@
+import { append, tooltip, setStyle } from '../utils';
+import icons from '../icons';
+import screenfull from 'screenfull';
+
 export default class Fullscreen {
   constructor(option) {
     this.option = option;
+    this.state = false;
   }
 
   apply(art, $control) {
     this.art = art;
+    const { events: { proxy }, i18n, player, refs: { $player } } = art;
+    this.$fullscreen = append($control, icons.fullscreen);
+    tooltip(this.$fullscreen, i18n.get('Fullscreen'));
+    proxy($control, 'click', () => {
+      if (this.state) {
+        screenfull.exit();
+        this.state = false;
+        $player.classList.remove('artplayer-fullscreen');
+        setStyle(this.$fullscreen, 'opacity', '1');
+        tooltip(this.$fullscreen, i18n.get('Fullscreen'));
+      } else {
+        if (screenfull.enabled) {
+          this.state = true;
+          $player.classList.add('artplayer-fullscreen');
+          setStyle(this.$fullscreen, 'opacity', '0.8');
+          tooltip(this.$fullscreen, i18n.get('Exit fullscreen'));
+          screenfull.request($player);
+        }
+      }
+      player.resetAspectRatio();
+      art.emit('fullscreen', this.state);
+    });
+  }
+
+  exit() {
+    screenfull.exit();
+    this.state = false;
+  }
+
+  toggle() {
+    const { $player } = this.art.refs;
+    screenfull.toggle($player);
+    this.state = screenfull.isFullscreen;
   }
 }

src/i18n.js

@@ -21,6 +21,8 @@ let i18nMap = {
     'Normal': '正常',
     'Switch video': '切换',
     'Switch subtitle': '切换字幕',
+    'Fullscreen': '全屏',
+    'Exit fullscreen': '退出全屏',
     'Web fullscreen': '网页全屏',
     'Exit web fullscreen': '退出网页全屏',
     'Common': '常规',
@@ -49,6 +51,8 @@ let i18nMap = {
     'Normal': '正常',
     'Switch video': '切換',
     'Switch subtitle': '切換字幕',
+    'Fullscreen': '全屏',
+    'Exit fullscreen': '退出全屏',
     'Web fullscreen': '網頁全屏',
     'Exit web fullscreen': '退出網頁全屏',
     'Common': '常規',

src/icons/fullscreen.svg

@@ -0,0 +1,30 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"  style="width: 80%; height: 80%">
+<g>
+	<g>
+		<path d="M236.454,172.808L132.421,68.789l43.184-43.184C185.014,16.197,178.365,0,165,0H15C6.709,0,0,6.709,0,15v150
+			c0,13.241,16.066,20.112,25.606,10.606l43.198-43.169l104.004,104.018c5.856,5.856,15.351,5.859,21.209,0.001l42.437-42.437
+			C242.286,188.187,242.334,178.688,236.454,172.808z"/>
+	</g>
+</g>
+<g>
+	<g>
+		<path d="M497,0H347c-13.361,0-20.018,16.193-10.606,25.605l43.184,43.184L275.544,172.792c-5.844,5.844-5.868,15.358,0,21.226
+			l42.437,42.437c5.86,5.86,15.352,5.859,21.211,0l104.019-104.034l43.184,43.184C495.93,185.141,512,178.23,512,165V15
+			C512,6.709,505.291,0,497,0z"/>
+	</g>
+</g>
+<g>
+	<g>
+		<path d="M486.396,336.393l-43.184,43.184L339.193,275.544c-5.856-5.856-15.349-5.862-21.211,0l-42.437,42.437
+			c-5.868,5.868-5.844,15.382,0,21.226l104.034,104.004l-43.184,43.184C326.986,495.803,333.635,512,347,512h150
+			c8.291,0,15-6.709,15-15V347C512,333.639,495.807,326.982,486.396,336.393z"/>
+	</g>
+</g>
+<g>
+	<g>
+		<path d="M236.456,317.983l-42.437-42.437c-5.625-5.625-15.586-5.625-21.211,0L68.789,379.579l-43.184-43.184
+			C16.283,327.04,0,333.563,0,347v150c0,8.291,6.709,15,15,15h150c13.361,0,20.018-16.193,10.606-25.605l-43.184-43.184
+			l104.034-104.017C242.336,333.314,242.289,323.816,236.456,317.983z"/>
+	</g>
+</g>
+</svg>

src/icons/index.js

@@ -8,6 +8,7 @@ import subtitle from './subtitle.svg';
 import screenshot from './screenshot.svg';
 import danmu from './danmu.svg';
 import setting from './setting.svg';
+import fullscreen from './fullscreen.svg';
 import fullscreenWeb from './fullscreen-web.svg';
 
 const icons = {
@@ -21,6 +22,7 @@ const icons = {
   screenshot,
   danmu,
   setting,
+  fullscreen,
   fullscreenWeb
 };