新增 iconsText 参数

langhuihui · Sep 23, 2024 · 7ac1984 · 7ac1984
1 parent 62b85c5
commit 7ac1984
Show file tree

Hide file tree

Showing 10 changed files with 104 additions and 21 deletions.
diff --git a/d.ts/jessibuca.d.ts b/d.ts/jessibuca.d.ts
@@ -109,6 +109,31 @@ declare namespace Jessibuca {
             /** 是否显示录制按 */
             record?: boolean;
         };
+        /**
+         * 配置 icon 文字提示
+         */
+        iconsText?: {
+            /** 播放 */
+            play?: string;
+            /** 暂停 */
+            pause?: string;
+            /** 声音调节 */
+            audio?: string;
+            /** 静音 */
+            mute?: string;
+            /** 截图 */
+            screenshot?: string;
+            /** 加载 */
+            loading?: string;
+            /** 全屏 */
+            fullscreen?: string;
+            /** 退出全屏 */
+            fullscreenExit?: string;
+            /** 录制 */
+            record?: string;
+            /** 停止录制 */
+            recordStop?: string;
+        };        
         /**
          * 开启屏幕常亮，在手机浏览器上, canvas标签渲染视频并不会像video标签那样保持屏幕常亮
          */

diff --git a/demo/api.md b/demo/api.md
@@ -259,6 +259,31 @@ worker地址
 4. audio 是否显示声音按钮
 5. record 是否显示录制按钮
 
+
+### iconsText
+
+- **类型**：`object`
+- **默认值**：`{}`
+- **用法**： 配置 icon 文字提示
+
+数据结构如下。
+
+```
+{
+    play: '播放',
+    pause: '暂停',
+    audio: '',
+    mute: '',
+    screenshot: '截图',
+    loading: '加载',
+    fullscreen: '全屏',
+    fullscreenExit: '退出全屏',
+    record: '录制',
+    recordStop: '停止录制',
+}
+
+```
+
 ### keepScreenOn
 
 - **类型**：`boolean`

diff --git a/demo/public/dist.zip b/demo/public/dist.zip
diff --git a/demo/public/jessibuca.js b/demo/public/jessibuca.js
diff --git a/dist/decoder.js b/dist/decoder.js
diff --git a/dist/jessibuca.d.ts b/dist/jessibuca.d.ts
@@ -109,6 +109,31 @@ declare namespace Jessibuca {
             /** 是否显示录制按 */
             record?: boolean;
         };
+        /**
+         * 配置 icon 文字提示
+         */
+        iconsText?: {
+            /** 播放 */
+            play?: string;
+            /** 暂停 */
+            pause?: string;
+            /** 声音调节 */
+            audio?: string;
+            /** 静音 */
+            mute?: string;
+            /** 截图 */
+            screenshot?: string;
+            /** 加载 */
+            loading?: string;
+            /** 全屏 */
+            fullscreen?: string;
+            /** 退出全屏 */
+            fullscreenExit?: string;
+            /** 录制 */
+            record?: string;
+            /** 停止录制 */
+            recordStop?: string;
+        };        
         /**
          * 开启屏幕常亮，在手机浏览器上, canvas标签渲染视频并不会像video标签那样保持屏幕常亮
          */

diff --git a/dist/jessibuca.js b/dist/jessibuca.js
diff --git a/src/constant/index.js b/src/constant/index.js
@@ -51,6 +51,7 @@ export const DEFAULT_PLAYER_OPTIONS = {
         audio: false,
         record: false,
     },
+    iconsText: {},
     controlAutoHide: false, // control auto hide
     hasControl: false,
     loadingText: '', // loading Text

diff --git a/src/control/icons.js b/src/control/icons.js
@@ -1,4 +1,4 @@
-const iconsMap = {
+const DEFAULT_ICONS = {
     play: '播放',
     pause: '暂停',
     audio: '',
@@ -11,10 +11,13 @@ const iconsMap = {
     recordStop: '停止录制',
 }
 
-export default Object.keys(iconsMap).reduce((icons, key) => {
-    icons[key] = `
-    <i class="jessibuca-icon jessibuca-icon-${key}"></i>
-    ${iconsMap[key] ? `<span class="icon-title-tips"><span class="icon-title">${iconsMap[key]}</span></span>` : ''}
-`;
-    return icons;
-}, {});
+export default function (iconsText) {
+    const iconsMap = Object.assign({}, DEFAULT_ICONS, iconsText)
+    return Object.keys(iconsMap).reduce((icons, key) => {
+        icons[key] = `
+        <i class="jessibuca-icon jessibuca-icon-${key}"></i>
+        ${iconsMap[key] ? `<span class="icon-title-tips"><span class="icon-title">${iconsMap[key]}</span></span>` : ''}
+    `;
+        return icons;
+    }, {})
+};
diff --git a/src/control/template.js b/src/control/template.js
@@ -1,4 +1,4 @@
-import icons from './icons';
+import createIcons from './icons';
 
 export default (player, control) => {
 
@@ -10,7 +10,7 @@ export default (player, control) => {
     }
     const options = player._opt;
     const operateBtns = options.operateBtns;
-
+    const icons = createIcons(options.iconsText)
 
     player.$container.insertAdjacentHTML(
         'beforeend',
@@ -27,7 +27,7 @@ export default (player, control) => {
                     <div class="jessibuca-recording-time">00:00:01</div>
                     <div class="jessibuca-icon-recordStop jessibuca-recording-stop">${icons.recordStop}</div>
                 </div>
-            `:''}
+            `: ''}
             ${options.hasControl ? `
                 <div class="jessibuca-controls">
                     <div class="jessibuca-controls-bottom">