change some icons

2026-10-27 17:51:20 -08:00 · 2022-04-29 10:14:19 +08:00
1 parent e2d016c28f
commit 208096f3c7
@@ -1,4 +1,4 @@
-import { append, tooltip } from '../utils';
+import { append, tooltip, setStyle } from '../utils';

 export default function fullscreen(option) {
    return (art) => ({
@@ -11,14 +11,24 @@ export default function fullscreen(option) {
                i18n,
            } = art;

-            append($control, icons.fullscreen);
+            const $fullscreenOn = append($control, icons.fullscreenOn);
+            const $fullscreenOff = append($control, icons.fullscreenOff);
+            setStyle($fullscreenOff, 'display', 'none');

            proxy($control, 'click', () => {
                art.fullscreen = !art.fullscreen;
            });

            art.on('fullscreen', (value) => {
-                tooltip($control, i18n.get(value ? 'Exit Fullscreen' : 'Fullscreen'));
+                if (value) {
+                    tooltip($control, i18n.get('Exit Fullscreen'));
+                    setStyle($fullscreenOn, 'display', 'none');
+                    setStyle($fullscreenOff, 'display', 'inline-flex');
+                } else {
+                    tooltip($control, i18n.get('Fullscreen'));
+                    setStyle($fullscreenOn, 'display', 'inline-flex');
+                    setStyle($fullscreenOff, 'display', 'none');
+                }
            });
        },
    });
@@ -1,4 +1,4 @@
-import { append, tooltip } from '../utils';
+import { append, tooltip, setStyle } from '../utils';

 export default function fullscreenWeb(option) {
    return (art) => ({
@@ -11,14 +11,24 @@ export default function fullscreenWeb(option) {
                i18n,
            } = art;

-            append($control, icons.fullscreenWeb);
+            const $fullscreenWebOn = append($control, icons.fullscreenWebOn);
+            const $fullscreenWebOff = append($control, icons.fullscreenWebOff);
+            setStyle($fullscreenWebOff, 'display', 'none');

            proxy($control, 'click', () => {
                art.fullscreenWeb = !art.fullscreenWeb;
            });

            art.on('fullscreenWeb', (value) => {
-                tooltip($control, i18n.get(value ? 'Exit Web Fullscreen' : 'Web Fullscreen'));
+                if (value) {
+                    tooltip($control, i18n.get('Exit Web Fullscreen'));
+                    setStyle($fullscreenWebOn, 'display', 'none');
+                    setStyle($fullscreenWebOff, 'display', 'inline-flex');
+                } else {
+                    tooltip($control, i18n.get('Web Fullscreen'));
+                    setStyle($fullscreenWebOn, 'display', 'inline-flex');
+                    setStyle($fullscreenWebOff, 'display', 'none');
+                }
            });
        },
    });
@@ -28,10 +28,10 @@
    "Web Fullscreen": "网页全屏",
    "Exit Web Fullscreen": "退出网页全屏",
    "Mini Player": "迷你播放器",
-    "PIP Mode": "画中画模式",
-    "Exit PIP Mode": "退出画中画模式",
-    "PIP Not Supported": "不支持画中画模式",
-    "Fullscreen Not Supported": "不支持全屏模式",
+    "PIP Mode": "开启画中画",
+    "Exit PIP Mode": "退出画中画",
+    "PIP Not Supported": "不支持画中画",
+    "Fullscreen Not Supported": "不支持全屏",
    "Subtitle Offset": "字幕偏移",
    "Auto playback at": "已为您定位至"
 }
@@ -28,10 +28,10 @@
    "Web Fullscreen": "網頁全屏",
    "Exit Web Fullscreen": "退出網頁全屏",
    "Mini Player": "迷你播放器",
-    "PIP Mode": "畫中畫模式",
-    "Exit PIP Mode": "退出畫中畫模式",
-    "PIP Not Supported": "不支持畫中畫模式",
-    "Fullscreen Not Supported": "不支持全屏模式",
+    "PIP Mode": "開啟畫中畫",
+    "Exit PIP Mode": "退出畫中畫",
+    "PIP Not Supported": "不支持畫中畫",
+    "Fullscreen Not Supported": "不支持全屏",
    "Subtitle Offset": "字幕偏移",
    "Auto playback at": "已為您定位至"
 }
@@ -0,0 +1,5 @@
+<?xml version="1.0" standalone="no"?>
+<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
+<svg class="icon" width="22" height="22" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg">
+<path fill="#ffffff" d="M768 298.666667h170.666667v85.333333h-256V128h85.333333v170.666667zM341.333333 384H85.333333V298.666667h170.666667V128h85.333333v256z m426.666667 341.333333v170.666667h-85.333333v-256h256v85.333333h-170.666667zM341.333333 640v256H256v-170.666667H85.333333v-85.333333h256z" />
+</svg>
@@ -0,0 +1,5 @@
+<?xml version="1.0" standalone="no"?>
+<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
+<svg class="icon" width="22" height="22" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg">
+<path fill="#ffffff" d="M625.777778 256h142.222222V398.222222h113.777778V142.222222H625.777778v113.777778zM256 398.222222V256H398.222222v-113.777778H142.222222V398.222222h113.777778zM768 625.777778v142.222222H625.777778v113.777778h256V625.777778h-113.777778zM398.222222 768H256V625.777778h-113.777778v256H398.222222v-113.777778z" />
+</svg>
@@ -0,0 +1,5 @@
+<?xml version="1.0" standalone="no"?>
+<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
+<svg class="icon" width="30" height="30" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg">
+<path fill="#ffffff" d="M803.39 220.61H220.61c-45.98 0-83.25 37.27-83.25 83.25v416.27c0 45.98 37.27 83.25 83.25 83.25h582.78c45.98 0 83.25-37.27 83.25-83.25V303.86c0-45.98-37.27-83.25-83.25-83.25zM293.46 407.93h60.55c6.79 0 12.29-5.5 12.29-12.29v-60.55c0-17.24 13.98-31.22 31.22-31.22s31.22 13.98 31.22 31.22v114.55c0 11.45-9.28 20.74-20.74 20.74H293.45c-17.24 0-31.22-13.98-31.22-31.22 0.01-17.25 13.99-31.23 31.23-31.23z m135.29 208.14v72.85c0 17.24-13.98 31.22-31.22 31.22s-31.22-13.98-31.22-31.22v-60.55c0-6.79-5.51-12.29-12.29-12.29h-60.56c-17.24 0-31.22-13.98-31.22-31.22s13.98-31.22 31.22-31.22h114.55c11.45 0 20.73 9.28 20.74 20.74v41.69z m301.79 0h-60.55c-6.79 0-12.29 5.5-12.29 12.29v60.55c0 17.24-13.98 31.22-31.22 31.22s-31.22-13.98-31.22-31.22V574.36c0-11.46 9.29-20.74 20.74-20.74h114.55c17.24 0 31.22 13.98 31.22 31.22-0.01 17.25-13.98 31.23-31.23 31.23z m0-145.7H615.99c-11.45 0-20.74-9.29-20.74-20.74V335.08c0-17.24 13.98-31.22 31.22-31.22s31.22 13.98 31.22 31.22v60.56c0 6.79 5.51 12.29 12.29 12.29h60.56c17.24 0 31.22 13.98 31.22 31.22s-13.98 31.22-31.22 31.22z" />
+</svg>
@@ -0,0 +1,5 @@
+<?xml version="1.0" standalone="no"?>
+<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
+<svg class="icon" width="30" height="30" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg">
+<path fill="#ffffff" d="M804.51 219.49H219.49c-46.16 0-83.58 37.42-83.58 83.58v417.88c0 46.16 37.42 83.58 83.58 83.58h585.03c46.16 0 83.58-37.42 83.58-83.58V303.06c-0.01-46.16-37.43-83.57-83.59-83.57zM261.27 365.74v-41.86c0-11.5 9.32-20.82 20.82-20.82h114.99c17.31 0 31.34 14.03 31.34 31.34 0 17.31-14.03 31.34-31.34 31.34h-60.79c-6.82 0-12.34 5.52-12.34 12.34v60.79c0 17.31-14.03 31.34-31.34 31.34-17.31 0-31.34-14.03-31.34-31.34v-73.13z m135.82 355.2H282.1c-11.5 0-20.81-9.32-20.82-20.82V585.13c0-17.31 14.03-31.34 31.34-31.34 17.31 0 31.34 14.03 31.34 31.34v60.79c0 6.82 5.53 12.34 12.34 12.34h60.79c17.31 0 31.34 14.03 31.34 31.34-0.01 17.31-14.04 31.34-31.34 31.34z m365.64-62.68v41.86c0 11.5-9.32 20.82-20.82 20.82H626.92c-17.31 0-31.34-14.03-31.34-31.34 0-17.31 14.03-31.34 31.34-31.34h60.79c6.82 0 12.34-5.52 12.34-12.34v-60.79c0-17.31 14.03-31.34 31.34-31.34 17.31 0 31.34 14.03 31.34 31.34v73.13z m0-292.52v73.13c0 17.31-14.03 31.34-31.34 31.34-17.31 0-31.34-14.03-31.34-31.34v-60.79c0-6.81-5.53-12.34-12.34-12.34h-60.79c-17.31 0-31.34-14.03-31.34-31.34 0-17.31 14.03-31.34 31.34-31.34h114.99c11.5 0 20.82 9.32 20.82 20.82v41.86z" />
+</svg>
@@ -1,3 +0,0 @@
-<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 36 36" height="36" width="36">
-	<path d="m 28,11 0,14 -20,0 0,-14 z m -18,2 16,0 0,10 -16,0 0,-10 z" fill-rule="evenodd"></path>
-</svg>
@@ -1,6 +0,0 @@
-<svg xmlns="http://www.w3.org/2000/svg" height="36" width="36" viewBox="0 0 36 36">
-	<path d="m 10,16 2,0 0,-4 4,0 0,-2 L 10,10 l 0,6 0,0 z"></path>
-	<path d="m 20,10 0,2 4,0 0,4 2,0 L 26,10 l -6,0 0,0 z"></path>
-	<path d="m 24,24 -4,0 0,2 L 26,26 l 0,-6 -2,0 0,4 0,0 z"></path>
-	<path d="M 12,20 10,20 10,26 l 6,0 0,-2 -4,0 0,-4 0,0 z"></path>
-</svg>
@@ -9,8 +9,6 @@ import volumeClose from 'bundle-text:./volume-close.svg';
 import subtitle from 'bundle-text:./subtitle.svg';
 import screenshot from 'bundle-text:./screenshot.svg';
 import setting from 'bundle-text:./setting.svg';
-import fullscreen from 'bundle-text:./fullscreen.svg';
-import fullscreenWeb from 'bundle-text:./fullscreen-web.svg';
 import arrowLeft from 'bundle-text:./arrow-left.svg';
 import arrowRight from 'bundle-text:./arrow-right.svg';
 import playbackRate from 'bundle-text:./playback-rate.svg';
@@ -19,6 +17,10 @@ import config from 'bundle-text:./config.svg';
 import pip from 'bundle-text:./pip.svg';
 import lock from 'bundle-text:./lock.svg';
 import unlock from 'bundle-text:./unlock.svg';
+import fullscreenOff from 'bundle-text:./fullscreen-off.svg';
+import fullscreenOn from 'bundle-text:./fullscreen-on.svg';
+import fullscreenWebOff from 'bundle-text:./fullscreen-web-off.svg';
+import fullscreenWebOn from 'bundle-text:./fullscreen-web-on.svg';

 export default class Icons {
    constructor(art) {
@@ -33,8 +35,6 @@ export default class Icons {
            subtitle,
            screenshot,
            setting,
-            fullscreen,
-            fullscreenWeb,
            pip,
            arrowLeft,
            arrowRight,
@@ -43,6 +43,10 @@ export default class Icons {
            config,
            lock,
            unlock,
+            fullscreenOff,
+            fullscreenOn,
+            fullscreenWebOff,
+            fullscreenWebOn,
            ...art.option.icons,
        };

@@ -1,3 +0,0 @@
-<svg xmlns="http://www.w3.org/2000/svg" height="36" width="36" viewBox="0 0 36 36">
-    <path d="M 12,24 20.5,18 12,12 V 24 z M 22,12 v 12 h 2 V 12 h -2 z"></path>
-</svg>
@@ -1,3 +0,0 @@
-<svg xmlns="http://www.w3.org/2000/svg" height="36" width="36" viewBox="0 0 36 36">
-    <path d="m 12,12 h 2 v 12 h -2 z m 3.5,6 8.5,6 V 12 z"></path>
-</svg>
@@ -14,8 +14,9 @@
        visibility: hidden;
        transition: all 0.2s ease-in-out;
        pointer-events: none;
-        background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAADGCAYAAAAT+OqFAAAAdklEQVQoz42QQQ7AIAgEF/T/D+kbq/RWAlnQyyazA4aoAB4FsBSA/bFjuF1EOL7VbrIrBuusmrt4ZZORfb6ehbWdnRHEIiITaEUKa5EJqUakRSaEYBJSCY2dEstQY7AuxahwXFrvZmWl2rh4JZ07z9dLtesfNj5q0FU3A5ObbwAAAABJRU5ErkJggg==)
-            repeat-x bottom;
+        background-image: linear-gradient(to top, #000, rgb(0 0 0 / 40%), transparent);
+        background-repeat: repeat-x;
+        background-position: center bottom;

        .art-progress {
            flex: 1;