feat: add lrc player

index.json

@@ -161,6 +161,15 @@
     "install": false,
     "react": false
   },
+  "lrc-player": {
+    "version": "0.1.0",
+    "style": true,
+    "icon": false,
+    "test": true,
+    "install": false,
+    "react": false,
+    "dependencies": []
+  },
   "markdown-editor": {
     "dependencies": ["markdown-viewer"],
     "icon": true,

src/lrc-player/README.md

@@ -0,0 +1,27 @@
+# Luna Lrc Player
+
+Play lyrics in LRC format.
+
+## Demo
+
+https://luna.liriliri.io/?path=/story/lrc-player
+
+## Install
+
+Add the following script and style to your page.
+
+```html
+<link rel="stylesheet" href="//cdn.jsdelivr.net/npm/luna-lrc-player/luna-lrc-player.css" />
+<script src="//cdn.jsdelivr.net/npm/luna-lrc-player/luna-lrc-player.js"></script>
+```
+
+You can also get it on npm.
+
+```bash
+npm install luna-lrc-player --save
+```
+
+```javascript
+import 'luna-lrc-player/luna-lrc-player.css'
+import LunaLrcPlayer from 'luna-lrc-player'
+```

src/lrc-player/index.ts

@@ -0,0 +1,15 @@
+import Component from '../share/Component'
+import { exportCjs } from '../share/util'
+
+/**
+ * Play lyrics in LRC format.
+ */
+export default class LrcPlayer extends Component {
+  constructor(container: HTMLElement) {
+    super(container, { compName: 'lrc-player' })
+  }
+}
+
+if (typeof module !== 'undefined') {
+  exportCjs(module, LrcPlayer)
+}

src/lrc-player/package.json

@@ -0,0 +1,5 @@
+{
+  "name": "lrc-player",
+  "version": "0.1.0",
+  "description": "Play lyrics in LRC format"
+}

src/lrc-player/story.js

@@ -0,0 +1,20 @@
+import 'luna-lrc-player.css'
+import LrcPlayer from 'luna-lrc-player.js'
+import readme from './README.md'
+import story from '../share/story'
+
+const def = story(
+  'lrc-player',
+  (container) => {
+    const lrcPlayer = new LrcPlayer(container)
+
+    return lrcPlayer
+  },
+  {
+    readme,
+    story: __STORY__,
+  }
+)
+
+export default def
+export const { lrcPlayer } = def

tsconfig.json

@@ -58,7 +58,8 @@
       "luna-image-viewer": ["src/image-viewer/index"],
       "luna-painter": ["src/painter/index"],
       "luna-mask-editor": ["src/mask-editor/index"],
-      "luna-image-list": ["src/image-list/index"]
+      "luna-image-list": ["src/image-list/index"],
+      "luna-lrc-player": ["src/lrc-player/index"]
     }
   }
 }