Support font-size option

public/_locales/en/messages.json

@@ -45,13 +45,18 @@
   },
 
   "optionsSaveTip": {
-    "message": "Need to reload to take effect",
+    "message": "With \"*\" mark with options need to reload to take effect",
     "description": "Some tips for saving options"
   },
 
-  "optionsSave": {
-    "message": "Save",
-    "description": "Save options"
+  "optionsFontSize": {
+    "message": "Lyrics font size",
+    "description": "Specify font size"
+  },
+
+  "optionsFontSizeDetail": {
+    "message": "This is a relative size, the width of the lyrics window is treated as 640px",
+    "description": "Specify font size detail"
   },
 
   "optionsSmoothScroll": {
@@ -80,7 +85,7 @@
   },
 
   "optionsLyricsPosition": {
-    "message": "Where the lyrics show",
+    "message": "Where the lyrics show *",
     "description": "Lyrics position option"
   },
 

public/_locales/zh/messages.json

@@ -32,11 +32,15 @@
   },
 
   "optionsSaveTip": {
-    "message": "需要重新加载才能生效"
+    "message": "带有“*”标记的选项需要重新加载才能生效"
   },
 
-  "optionsSave": {
-    "message": "保存"
+  "optionsFontSize": {
+    "message": "歌词字体大小"
+  },
+
+  "optionsFontSizeDetail": {
+    "message": "这是一个相对尺寸，将歌词窗口的宽度视为 640px"
   },
 
   "optionsSmoothScroll": {
@@ -56,7 +60,7 @@
   },
 
   "optionsLyricsPosition": {
-    "message": "歌词显示位置"
+    "message": "歌词显示位置 *"
   },
 
   "optionsLyricsPositionDetail": {

src/common/consts.ts

@@ -30,6 +30,7 @@ export const LocalStorageKeys = {
 
 export const LyricsPositions = ['page', 'pip'] as const;
 export interface Options {
+  'font-size': number;
   'lyrics-smooth-scroll': Value;
   'only-cover': Value;
   'clean-lyrics': Value;

src/options/app.ts

@@ -13,27 +13,18 @@ import './elements/form';
 import './elements/form-item';
 import './elements/select';
 import './elements/switch';
-import './elements/button';
 
 import { getOptions, updateOptions } from './store';
 const options = getOptions();
 
 @customElement('options-app')
-export class Test extends GemElement<{ changed: boolean }> {
+export class Test extends GemElement {
   @refobject formRef: RefObject<Form>;
 
-  state = { changed: false };
-
   inputHandler = () => {
-    this.setState({ changed: true });
-  };
-
-  submitHandler = () => {
     if (!this.formRef.element) return;
     updateOptions(Object.fromEntries(this.formRef.element.value));
 
-    this.setState({ changed: false });
-
     const manifest = browser.runtime.getManifest() as typeof import('../../public/manifest.json');
     browser.tabs.query({ url: manifest.content_scripts[0].matches }).then((tabs) => {
       tabs.forEach((tab) => {
@@ -59,12 +50,23 @@ export class Test extends GemElement<{ changed: boolean }> {
           border-bottom: 1px solid rgba(${theme.blackRGB}, 0.1);
         }
         .tip {
+          font-size: 1.2rem;
           font-style: italic;
           color: rgba(${theme.blackRGB}, 0.5);
-          margin-bottom: 2em;
+          margin: 2em 0;
         }
       </style>
       <ele-form @input=${this.inputHandler} ref=${this.formRef.ref}>
+        <ele-form-item label=${i18n.optionsFontSize()} description=${i18n.optionsFontSizeDetail()}>
+          <ele-select
+            name=${'font-size' as keyof Options}
+            default-value=${String(options['font-size'])}
+            .options=${new Array(9).fill(null).map((_, index) => ({
+              label: String(index * 2 + 32) + 'px',
+              value: String(index * 2 + 32),
+            }))}
+          ></ele-select>
+        </ele-form-item>
         <ele-form-item
           ?hidden=${!isSupportES2018RegExp}
           label=${i18n.optionsSmoothScroll()}
@@ -85,7 +87,7 @@ export class Test extends GemElement<{ changed: boolean }> {
           ></ele-switch>
         </ele-form-item>
         <ele-form-item
-          label="${i18n.optionsLyricsPosition()}(*)"
+          label="${i18n.optionsLyricsPosition()}"
           description=${i18n.optionsLyricsPositionDetail()}
         >
           <ele-select
@@ -101,10 +103,7 @@ export class Test extends GemElement<{ changed: boolean }> {
           ></ele-switch>
         </ele-form-item>
       </ele-form>
-      <p class="tip">(*): ${i18n.optionsSaveTip()}</p>
-      <ele-button ?disabled=${!this.state.changed} @click=${this.submitHandler}>
-        ${i18n.optionsSave()}
-      </ele-button>
+      <p class="tip">${i18n.optionsSaveTip()}</p>
     `;
   }
 }

src/options/elements/form-item.ts

@@ -16,6 +16,9 @@ export class FormItem extends GemElement {
           display: none;
         }
         .text {
+          display: flex;
+          flex-direction: column;
+          justify-content: center;
           cursor: default;
           flex-grow: 1;
           line-height: 1.3;

src/options/store.ts

@@ -7,10 +7,12 @@ let optionsCache: Options | null = null;
 export function getOptions() {
   if (optionsCache) return optionsCache;
   optionsCache = {} as Options;
+  // default options
   optionsCache['lyrics-smooth-scroll'] = 'off';
   optionsCache['only-cover'] = 'off';
   optionsCache['clean-lyrics'] = 'off';
   optionsCache['show-on'] = 'pip';
+  optionsCache['font-size'] = 48;
   optionsCache.cid = `${Date.now()}-${Math.random()}`;
   const localOptionsStr = localStorage.getItem(LocalStorageKeys.CONFIG);
   if (localOptionsStr) {

src/page/canvas-renderer.ts

@@ -124,17 +124,6 @@ function drawParagraph(ctx: CanvasRenderingContext2D, str = '', options: Options
   };
 }
 
-const focusLineFontSize = 48;
-const focusLineHeight = focusLineFontSize * 1.2;
-const focusLineMargin = focusLineFontSize * 1;
-const otherLineFontSize = focusLineFontSize * 1;
-const otherLineHeight = otherLineFontSize * 1.2;
-const otherLineMargin = otherLineFontSize * 1;
-const otherLineOpacity = 0.35;
-const marginWidth = focusLineFontSize * 1;
-const animateDuration = 0.3;
-const backgroundColor = '#000000b0';
-
 let offscreenCanvas: HTMLCanvasElement;
 let offscreenCtx: CanvasRenderingContext2D;
 let gradient: CanvasGradient;
@@ -157,7 +146,19 @@ export function renderLyricsWithCanvas(
   ctx: CanvasRenderingContext2D,
   lyrics: Lyric,
   currentTime: number, // s
+  options: { focusLineFontSize: number },
 ) {
+  const focusLineFontSize = options.focusLineFontSize;
+  const focusLineHeight = focusLineFontSize * 1.2;
+  const focusLineMargin = focusLineFontSize * 1;
+  const otherLineFontSize = focusLineFontSize * 1;
+  const otherLineHeight = otherLineFontSize * 1.2;
+  const otherLineMargin = otherLineFontSize * 1;
+  const otherLineOpacity = 0.35;
+  const marginWidth = focusLineFontSize * 1;
+  const animateDuration = 0.3;
+  const backgroundColor = '#000000b0';
+
   ctx.save();
   ctx.fillStyle = backgroundColor;
   ctx.fillRect(0, 0, ctx.canvas.width, ctx.canvas.height);

src/page/index.ts

@@ -67,12 +67,16 @@ const update = async () => {
     return;
   }
 
+  const renderOptions = {
+    focusLineFontSize: options['font-size'],
+  };
+
   if (options['lyrics-smooth-scroll'] === 'on') {
     drawCover();
-    renderLyricsWithCanvas(ctx, sharedData.lyrics, audio.currentTime);
+    renderLyricsWithCanvas(ctx, sharedData.lyrics, audio.currentTime, renderOptions);
     requestAnimationFrame(update);
   } else {
-    const img = await renderLyricsWithSVG(ctx, sharedData.lyrics, audio.currentTime);
+    const img = await renderLyricsWithSVG(ctx, sharedData.lyrics, audio.currentTime, renderOptions);
     drawCover();
     img && ctx.drawImage(img, 0, 0, video.width, video.height);
     setTimeout(update, INTERVAL);