feat(player): icons

auioc · Jul 11, 2024 · 8050d7d · 8050d7d
1 parent e827160
commit 8050d7d
Show file tree

Hide file tree

Showing 3 changed files with 13 additions and 2 deletions.
diff --git a/README.md b/README.md
@@ -40,6 +40,7 @@
 - [AUIOC](https://www.auioc.org)：技术支持
 - [CommentCoreLibrary](https://github.com/jabbany/CommentCoreLibrary)：弹幕支持
 - [ASS.JS](https://github.com/weizhenye/ASS)：字幕支持
+- [Bootstrap Icons](https://icons.getbootstrap.com)：控件图标
 
 ## 许可证
 

diff --git a/public/player.css b/public/player.css
@@ -127,6 +127,10 @@ video {
     border-width: 1px 0 0 0 !important;
 }
 
+.controls > button.play-toggle {
+    padding: 2px 5px;
+}
+
 .controls > .volume-wrapper {
     display: flex;
     gap: 2px;

diff --git a/src/player.player.ts b/src/player.player.ts
@@ -59,6 +59,8 @@ const __player_metadata__ = (function () {
         '<path d="M3.708 7.755c0-1.111.488-1.753 1.319-1.753.681 0 1.138.47 1.186 1.107H7.36V7c-.052-1.186-1.024-2-2.342-2C3.414 5 2.5 6.05 2.5 7.751v.747c0 1.7.905 2.73 2.518 2.73 1.314 0 2.285-.792 2.342-1.939v-.114H6.213c-.048.615-.496 1.05-1.186 1.05-.84 0-1.319-.62-1.319-1.727zm6.14 0c0-1.111.488-1.753 1.318-1.753.682 0 1.139.47 1.187 1.107H13.5V7c-.053-1.186-1.024-2-2.342-2C9.554 5 8.64 6.05 8.64 7.751v.747c0 1.7.905 2.73 2.518 2.73 1.314 0 2.285-.792 2.342-1.939v-.114h-1.147c-.048.615-.497 1.05-1.187 1.05-.839 0-1.318-.62-1.318-1.727z"/><path d="M14 3a1 1 0 0 1 1 1v8a1 1 0 0 1-1 1H2a1 1 0 0 1-1-1V4a1 1 0 0 1 1-1zM2 2a2 2 0 0 0-2 2v8a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V4a2 2 0 0 0-2-2z"/>';
 
     const icons = {
+        play: '<path d="m11.596 8.697-6.363 3.692c-.54.313-1.233-.066-1.233-.697V4.308c0-.63.692-1.01 1.233-.696l6.363 3.692a.802.802 0 0 1 0 1.393"/>',
+        pause: '<path d="M5.5 3.5A1.5 1.5 0 0 1 7 5v6a1.5 1.5 0 0 1-3 0V5a1.5 1.5 0 0 1 1.5-1.5m5 0A1.5 1.5 0 0 1 12 5v6a1.5 1.5 0 0 1-3 0V5a1.5 1.5 0 0 1 1.5-1.5"/>',
         volume: '<path d="M9 4a.5.5 0 0 0-.812-.39L5.825 5.5H3.5A.5.5 0 0 0 3 6v4a.5.5 0 0 0 .5.5h2.325l2.363 1.89A.5.5 0 0 0 9 12zm3.025 4a4.5 4.5 0 0 1-1.318 3.182L10 10.475A3.5 3.5 0 0 0 11.025 8 3.5 3.5 0 0 0 10 5.525l.707-.707A4.5 4.5 0 0 1 12.025 8"/>',
         mute: '<path d="M6.717 3.55A.5.5 0 0 1 7 4v8a.5.5 0 0 1-.812.39L3.825 10.5H1.5A.5.5 0 0 1 1 10V6a.5.5 0 0 1 .5-.5h2.325l2.363-1.89a.5.5 0 0 1 .529-.06m7.137 2.096a.5.5 0 0 1 0 .708L12.207 8l1.647 1.646a.5.5 0 0 1-.708.708L11.5 8.707l-1.646 1.647a.5.5 0 0 1-.708-.708L10.793 8 9.146 6.354a.5.5 0 1 1 .708-.708L11.5 7.293l1.646-1.647a.5.5 0 0 1 .708 0"/>',
         danmakuOff: icon_danmaku_off,
@@ -67,6 +69,10 @@ const __player_metadata__ = (function () {
             '<path d="M3 3.5a.5.5 0 0 1 .5-.5h9a.5.5 0 0 1 0 1h-9a.5.5 0 0 1-.5-.5M3 6a.5.5 0 0 1 .5-.5h9a.5.5 0 0 1 0 1h-9A.5.5 0 0 1 3 6m0 2.5a.5.5 0 0 1 .5-.5h5a.5.5 0 0 1 0 1h-5a.5.5 0 0 1-.5-.5"/>',
         subtitleOn: icon_subtitle_on,
         subtitleOff: icon_subtitle_on.replace('d=', 'fill="#7e7e7e" d='),
+        exitFullscreen:
+            '<path fill-rule="evenodd" d="M15 2a1 1 0 0 0-1-1H2a1 1 0 0 0-1 1v12a1 1 0 0 0 1 1h12a1 1 0 0 0 1-1zM0 2a2 2 0 0 1 2-2h12a2 2 0 0 1 2 2v12a2 2 0 0 1-2 2H2a2 2 0 0 1-2-2zm10.096 3.146a.5.5 0 1 1 .707.708L6.707 9.95h2.768a.5.5 0 1 1 0 1H5.5a.5.5 0 0 1-.5-.5V6.475a.5.5 0 1 1 1 0v2.768z"/>',
+        fullscreen:
+            '<path fill-rule="evenodd" d="M15 2a1 1 0 0 0-1-1H2a1 1 0 0 0-1 1v12a1 1 0 0 0 1 1h12a1 1 0 0 0 1-1zM0 2a2 2 0 0 1 2-2h12a2 2 0 0 1 2 2v12a2 2 0 0 1-2 2H2a2 2 0 0 1-2-2zm5.854 8.803a.5.5 0 1 1-.708-.707L9.243 6H6.475a.5.5 0 1 1 0-1h3.975a.5.5 0 0 1 .5.5v3.975a.5.5 0 1 1-1 0V6.707z"/>',
     } as const;
 
     function icon<K extends keyof typeof icons>(p: K) {
@@ -137,7 +143,7 @@ const __player_metadata__ = (function () {
         .selfEvents({
             click: (P) => P.togglePlay(),
         })
-        .children(...spans('⏵', '⏸'));
+        .children(...spans(icon('play'), icon('pause')));
 
     const muteToggle = new EDC('button', 'muteToggle')
         .class('mute-toggle')
@@ -345,7 +351,7 @@ const __player_metadata__ = (function () {
         .selfEvents({
             click: (P) => P.toggleFullscreen(),
         })
-        .children(...spans('🡷', '🡵'));
+        .children(...spans(icon('exitFullscreen'), icon('fullscreen')));
 
     const danmakuList = new EDC('div', 'danmakuList')
         .condition(hasDanmaku)