Add sponsor

Author: o_wangxianqiao

public/_locales/en/messages.json

@@ -1,4 +1,8 @@
 {
+  "sponsorsText": {
+    "message": "If this extension is helpful to you, please support the author:"
+  },
+
   "extensionName": {
     "message": "SLyrics",
     "description": "Name of the extension"
@@ -29,12 +33,12 @@
     "description": "Request confirmation from the user"
   },
 
-  "popupConfirmSave" : {
+  "popupConfirmSave": {
     "message": "Save",
     "description": "Save user selection"
   },
 
-  "popupConfirmCancel" : {
+  "popupConfirmCancel": {
     "message": "Cancel",
     "description": "Cancel manually set lyrics"
   },
@@ -74,7 +78,6 @@
     "description": "Specify font size detail"
   },
 
-
   "optionsFontFamily": {
     "message": "Lyrics font family",
     "description": "Specify lyrics font family"
@@ -210,23 +213,22 @@
     "message": "Playback rate",
     "description": "Audio playback rate"
   },
-  
+
   "pageEditorOffset": {
     "message": "Global offset",
     "description": "Lyrics offset lable"
   },
-  
+
   "pageEditorOffsetDetail": {
     "message": "Offset 0.1s",
     "description": "Lyrics offset button title"
   },
-  
+
   "pageEditorClearAll": {
     "message": "Clear all",
     "description": "Cleaer all lyrics"
   },
 
-
   "pageEditorSeek": {
     "message": "Jump",
     "description": "Track seek tip"
@@ -276,4 +278,4 @@
     "message": "Please add a timestamp to each line of text",
     "description": "Save lyrics valid tip"
   }
-}
+}

public/_locales/zh/messages.json

@@ -1,4 +1,8 @@
 {
+  "sponsorsText": {
+    "message": "如果这个扩展对你有帮助，欢迎支持作者:"
+  },
+
   "extensionName": {
     "message": "SLyrics"
   },

src/options.html

@@ -1,2 +1,7 @@
 <title>Spotify Lyrics Options</title>
-<script type="module" src="./options/index.ts"></script>
+<script type="module" src="./options/index.ts"></script>
+<style>
+  body {
+    min-width: 620px;
+  }
+</style>

src/options/app.ts

@@ -20,6 +20,7 @@ import './elements/form';
 import './elements/form-item';
 import './elements/select';
 import './elements/switch';
+import './elements/sponsor';
 
 import { getOptions, updateOptions } from './store';
 
@@ -75,6 +76,7 @@ export class OptionsApp extends GemElement<State> {
     if (!options) return null;
 
     return html`
+      <ele-sponsor></ele-sponsor>
       <style>
         :host {
           display: block;

src/options/elements/form-item.ts

@@ -1,6 +1,8 @@
 import { customElement, attribute, boolattribute } from '@mantou/gem/lib/decorators';
 import { GemElement, html } from '@mantou/gem/lib/element';
 
+import { theme } from '../../common/theme';
+
 @customElement('ele-form-item')
 export class FormItem extends GemElement {
   @attribute label: string;
@@ -22,6 +24,9 @@ export class FormItem extends GemElement {
           pointer-events: none;
           opacity: 0.3;
         }
+        :host(:not(:disabled):hover) {
+          background: rgba(${theme.backgroundRGB}, 0.02);
+        }
         .text {
           display: flex;
           flex-direction: column;

src/options/elements/sponsor.ts

@@ -0,0 +1,32 @@
+import { GemElement, html } from '@mantou/gem/lib/element';
+import { customElement } from '@mantou/gem/lib/decorators';
+
+import { theme } from '../../common/theme';
+import { i18n } from '../../i18n';
+
+@customElement('ele-sponsor')
+export class Sponsor extends GemElement {
+  render() {
+    return html`
+      <style>
+        :host {
+          display: flex;
+          gap: 1em;
+          color: rgb(${theme.blackRGB});
+          font-size: 1.2em;
+          margin-block: 0.5em;
+        }
+        a {
+          color: rgb(${theme.primaryRGB});
+        }
+      </style>
+      ${i18n.sponsorsText()}
+      <a href="https://github.com/sponsors/mantou132" target="_blank" rel="noopener noreferrer">
+        GitHub Sponsors
+      </a>
+      <a href="https://www.buymeacoffee.com/mantou132" target="_blank" rel="noopener noreferrer">
+        Buy Me a Coffee
+      </a>
+    `;
+  }
+}

src/page/config.ts

@@ -86,6 +86,9 @@ export const localConfig: LocalConfig = (() => {
             transform: rotate(90deg) scale(1.1);
             -webkit-mask: url(${iconUrl}) center / 100% no-repeat;
             mask: url(${iconUrl}) center / 100% no-repeat;
+            & > * {
+              display: none;
+            }
           }
           .${LYRICS_CLASSNAME}.${LYRICS_ACTIVE_CLASSNAME} .yt-spec-button-shape-next__icon {
             background: var(--ytmusic-text-primary);