分辨率切换

src/contextmenu.js

@@ -14,11 +14,19 @@ export default class Contextmenu {
       {
         disable: !option.playbackRate,
         name: 'playbackRate',
-        html: `${i18n.get('Play speed')}: <span>0.5</span><span>0.75</span><span class="current">1.0</span><span>1.25</span><span>1.5</span><span>2.0</span>`,
+        html: `
+          ${i18n.get('Play speed')}:
+          <span data-rate="0.5">0.5</span>
+          <span data-rate="0.75">0.75</span>
+          <span data-rate="1" class="current">${i18n.get('Normal')}</span>
+          <span data-rate="1.25">1.25</span>
+          <span data-rate="1.5">1.5</span>
+          <span data-rate="2.0">2.0</span>
+        `,
         click: (art, event) => {
           const { target } = event;
-          const rate = target.innerText;
-          if (target.tagName === 'SPAN' && rate) {
+          const { rate } = target.dataset;
+          if (rate) {
             player.playbackRate(Number(rate));
             sublings(target).forEach(item => item.classList.remove('current'));
             target.classList.add('current');
@@ -29,11 +37,16 @@ export default class Contextmenu {
       {
         disable: !option.aspectRatio,
         name: 'aspectRatio',
-        html: `${i18n.get('Aspect ratio')}: <span class="current">${i18n.get('Default')}</span><span>4:3</span><span>16:9</span>`,
+        html: `
+          ${i18n.get('Aspect ratio')}:
+          <span data-ratio="default" class="current">${i18n.get('Default')}</span>
+          <span data-ratio="4:3">4:3</span>
+          <span data-ratio="16:9">16:9</span>
+        `,
         click: (art, event) => {
           const { target } = event;
-          const ratio = target.innerText;
-          if (target.tagName === 'SPAN' && ratio) {
+          const { ratio } = target.dataset;
+          if (ratio) {
             player.aspectRatio(ratio.split(':'));
             sublings(target).forEach(item => item.classList.remove('current'));
             target.classList.add('current');

src/i18n.js

@@ -15,7 +15,8 @@ let i18nMap = {
     'Screenshot': '截图',
     'Play speed': '播放速度',
     'Aspect ratio': '画面比例',
-    'Default': '默认'
+    'Default': '默认',
+    'Normal': '正常'
   },
   'zh-tw': {
     'About author': '關於作者',
@@ -33,7 +34,8 @@ let i18nMap = {
     'Screenshot': '截圖',
     'Play speed': '播放速度',
     'Aspect ratio': '畫面比例',
-    'Default': '默認'
+    'Default': '默認',
+    'Normal': '正常'
   }
 };
 

src/player.js

@@ -170,19 +170,32 @@ export default class Player {
     const newRate = clamp(rate, 0.1, 10);
     $video.playbackRate = newRate;
     $player.dataset.playbackRate = newRate;
-    notice.show(`${i18n.get('Rate')}: ${newRate}x`);
+    notice.show(`${i18n.get('Rate')}: ${newRate === 1 ? i18n.get('Normal') : `${newRate}x`}`);
     this.art.emit('playbackRate', newRate);
   }
 
   aspectRatio(ratio) {
     const { refs: { $video, $player }, i18n, notice } = this.art;
-    const ratioName = ratio.length === 2 ? `${ratio[0]}:${ratio[1]}` : ratio[0];
+    const ratioName = ratio.length === 2 ? `${ratio[0]}:${ratio[1]}` : i18n.get('Default');
 
     if (ratio.length === 2) {
-      const rate = Number(ratio[0]) / Number(ratio[1]);
-      setStyle($video, 'width', `${100 / rate}%`);
-      setStyle($video, 'height', '100%');
-      setStyle($video, 'padding', `0 ${($player.clientWidth - $player.clientWidth / rate) / 2}px`);
+      const { videoWidth, videoHeight } = $video;
+      const { clientWidth, clientHeight } = $player;
+      const videoRatio = videoWidth / videoHeight;
+      const setupRatio = Number(ratio[0]) / Number(ratio[1]);
+
+      if (videoRatio > setupRatio) {
+        const percentage = setupRatio * videoHeight / videoWidth;
+        setStyle($video, 'width', `${percentage * 100}%`);
+        setStyle($video, 'height', '100%');
+        setStyle($video, 'padding', `0 ${(clientWidth - clientWidth * percentage) / 2}px`);
+      } else {
+        const percentage = videoWidth / setupRatio / videoHeight;
+        setStyle($video, 'width', '100%');
+        setStyle($video, 'height', `${percentage * 100}%`);
+        setStyle($video, 'padding', `${(clientHeight - clientHeight * percentage) / 2}px 0`);
+      }
+
       $player.dataset.aspectRatio = ratioName;
     } else {
       setStyle($video, 'width', null);