i18n改用json格式

packages/artplayer/src/i18n/index.js

@@ -1,6 +1,6 @@
 import { mergeDeep } from '../utils';
-import zhCn from './zh-cn';
-import zhTw from './zh-tw';
+import zhCn from './zh-cn.json';
+import zhTw from './zh-tw.json';
 
 export default class I18n {
     constructor(art) {

packages/artplayer/src/i18n/zh-cn.js

@@ -1,33 +0,0 @@
-export default {
-    'About author': '关于作者',
-    'Video info': '视频统计信息',
-    Close: '关闭',
-    'Video load failed': '视频加载失败',
-    Volume: '音量',
-    Play: '播放',
-    Pause: '暂停',
-    Rate: '速度',
-    Mute: '静音',
-    Flip: '视频翻转',
-    Horizontal: '水平',
-    Vertical: '垂直',
-    Reconnect: '重新连接',
-    'Hide subtitle': '隐藏字幕',
-    'Show subtitle': '显示字幕',
-    'Hide danmu': '隐藏弹幕',
-    'Show danmu': '显示弹幕',
-    'Show setting': '显示设置',
-    'Hide setting': '隐藏设置',
-    Screenshot: '截图',
-    'Play speed': '播放速度',
-    'Aspect ratio': '画面比例',
-    Default: '默认',
-    Normal: '正常',
-    'Switch video': '切换',
-    'Switch subtitle': '切换字幕',
-    Fullscreen: '全屏',
-    'Exit fullscreen': '退出全屏',
-    'Web fullscreen': '网页全屏',
-    'Exit web fullscreen': '退出网页全屏',
-    'Mini player': '迷你播放器',
-};

packages/artplayer/src/i18n/zh-cn.json

@@ -0,0 +1,34 @@
+{
+    "About author": "关于作者",
+    "Video info": "视频统计信息",
+    "Close": "关闭",
+    "Video load failed": "视频加载失败",
+    "Volume": "音量",
+    "Play": "播放",
+    "Pause": "暂停",
+    "Rate": "速度",
+    "Mute": "静音",
+    "Flip": "视频翻转",
+    "Horizontal": "水平",
+    "Vertical": "垂直",
+    "Reconnect": "重新连接",
+    "Hide subtitle": "隐藏字幕",
+    "Show subtitle": "显示字幕",
+    "Hide danmu": "隐藏弹幕",
+    "Show danmu": "显示弹幕",
+    "Show setting": "显示设置",
+    "Hide setting": "隐藏设置",
+    "Screenshot": "截图",
+    "Play speed": "播放速度",
+    "Aspect ratio": "画面比例",
+    "Default": "默认",
+    "Normal": "正常",
+    "Switch video": "切换",
+    "Switch subtitle": "切换字幕",
+    "Fullscreen": "全屏",
+    "Exit fullscreen": "退出全屏",
+    "Web fullscreen": "网页全屏",
+    "Exit web fullscreen": "退出网页全屏",
+    "Mini player": "迷你播放器",
+    "This does not seem to support full screen functionality": "似乎不支持全屏功能"
+}

packages/artplayer/src/i18n/zh-tw.js

@@ -1,33 +0,0 @@
-export default {
-    'About author': '關於作者',
-    'Video info': '影片統計訊息',
-    Close: '關閉',
-    'Video load failed': '影片載入失敗',
-    Volume: '音量',
-    Play: '播放',
-    Pause: '暫停',
-    Rate: '速度',
-    Mute: '靜音',
-    Flip: '影片翻轉',
-    Horizontal: '水平',
-    Vertical: '垂直',
-    Reconnect: '重新連接',
-    'Hide subtitle': '隱藏字幕',
-    'Show subtitle': '顯示字幕',
-    'Show setting': '顯示设置',
-    'Hide setting': '隱藏设置',
-    'Hide danmu': '隱藏彈幕',
-    'Show danmu': '顯示彈幕',
-    Screenshot: '截圖',
-    'Play speed': '播放速度',
-    'Aspect ratio': '畫面比例',
-    Default: '默認',
-    Normal: '正常',
-    'Switch video': '切換',
-    'Switch subtitle': '切換字幕',
-    Fullscreen: '全屏',
-    'Exit fullscreen': '退出全屏',
-    'Web fullscreen': '網頁全屏',
-    'Exit web fullscreen': '退出網頁全屏',
-    'Mini player': '迷你播放器',
-};

packages/artplayer/src/i18n/zh-tw.json

@@ -0,0 +1,34 @@
+{
+    "About author": "關於作者",
+    "Video info": "影片統計訊息",
+    "Close": "關閉",
+    "Video load failed": "影片載入失敗",
+    "Volume": "音量",
+    "Play": "播放",
+    "Pause": "暫停",
+    "Rate": "速度",
+    "Mute": "靜音",
+    "Flip": "影片翻轉",
+    "Horizontal": "水平",
+    "Vertical": "垂直",
+    "Reconnect": "重新連接",
+    "Hide subtitle": "隱藏字幕",
+    "Show subtitle": "顯示字幕",
+    "Show setting": "顯示设置",
+    "Hide setting": "隱藏设置",
+    "Hide danmu": "隱藏彈幕",
+    "Show danmu": "顯示彈幕",
+    "Screenshot": "截圖",
+    "Play speed": "播放速度",
+    "Aspect ratio": "畫面比例",
+    "Default": "默認",
+    "Normal": "正常",
+    "Switch video": "切換",
+    "Switch subtitle": "切換字幕",
+    "Fullscreen": "全屏",
+    "Exit fullscreen": "退出全屏",
+    "Web fullscreen": "網頁全屏",
+    "Exit web fullscreen": "退出網頁全屏",
+    "Mini player": "迷你播放器",
+    "This does not seem to support full screen functionality": "似乎不支持全屏功能"
+}

packages/artplayer/src/player/fullscreenMix.js

@@ -2,6 +2,7 @@ import screenfull from 'screenfull';
 
 export default function fullscreenMix(art, player) {
     const {
+        i18n,
         notice,
         events: { destroyEvents },
         template: { $player },
@@ -12,7 +13,7 @@ export default function fullscreenMix(art, player) {
     };
 
     const screenfullError = () => {
-        notice.show('Your browser does not seem to support full screen functionality.');
+        notice.show(i18n.get('This does not seem to support full screen functionality'));
     };
 
     try {

packages/artplayer/src/player/screenshotMix.js

@@ -1,4 +1,4 @@
-import { secondToTime, downloadImage } from '../utils';
+import { secondToTime, downloadFile } from '../utils';
 
 export default function screenshotMix(art, player) {
     const {
@@ -46,7 +46,7 @@ export default function screenshotMix(art, player) {
         value: () => {
             const dataUri = player.getScreenshotDataURL();
             if (dataUri) {
-                downloadImage(dataUri, `${option.title || 'artplayer'}_${secondToTime($video.currentTime)}.png`);
+                downloadFile(dataUri, `${option.title || 'artplayer'}_${secondToTime($video.currentTime)}.png`);
                 art.emit('screenshot', dataUri);
             }
         },

packages/artplayer/src/style/setting.scss

@@ -18,7 +18,7 @@
             top: 0;
             right: -50%;
             bottom: 0;
-            width: 50%;
+            width: 300px;
             height: 100%;
             font-size: 12px;
             background: rgba(0, 0, 0, 0.8);

packages/artplayer/src/utils/component.js

@@ -1,4 +1,4 @@
-import { append, insertByIndex, setStyles, setStyle, remove } from './index';
+import { append, setStyles, setStyle, remove } from './index';
 
 export default function component(art, parent, target, getOption, callback, title) {
     const option = typeof getOption === 'function' ? getOption(art) : getOption;
@@ -15,7 +15,14 @@ export default function component(art, parent, target, getOption, callback, titl
             setStyles($element, option.style);
         }
 
-        insertByIndex(target, $element, option.index || parent.id);
+        const childs = Array.from(target.children);
+        $element.dataset.index = option.index || parent.id;
+        const nextChild = childs.find(item => Number(item.dataset.index) >= Number($element.dataset.index));
+        if (nextChild) {
+            nextChild.insertAdjacentElement('beforebegin', $element);
+        } else {
+            append(target, $element);
+        }
 
         if (option.click) {
             art.events.proxy($element, 'click', event => {

packages/artplayer/src/utils/index.js

@@ -108,18 +108,6 @@ export function remove(child) {
     return child.parentNode.removeChild(child);
 }
 
-export function insertByIndex(parent, child, index) {
-    const childs = Array.from(parent.children);
-    child.dataset.index = index;
-    const nextChild = childs.find(item => Number(item.dataset.index) >= Number(index));
-    if (nextChild) {
-        nextChild.insertAdjacentElement('beforebegin', child);
-    } else {
-        append(parent, child);
-    }
-    return child;
-}
-
 export function setStyle(element, key, value) {
     element.style[key] = value;
     return element;
@@ -171,7 +159,7 @@ export function vttToBlob(vttText) {
     );
 }
 
-export function downloadImage(url, name) {
+export function downloadFile(url, name) {
     const elink = document.createElement('a');
     setStyle(elink, 'display', 'none');
     elink.href = url;