release(video-player): v1.0.0

index.json

@@ -343,7 +343,7 @@
   },
   "video-player": {
     "icon": true,
-    "version": "0.1.0",
+    "version": "1.0.0",
     "style": true,
     "test": true,
     "install": false,

src/video-player/CHANGELOG.md

@@ -0,0 +1,3 @@
+## 1.0.0 (25 Dec 2023)
+
+* feat: hotkey

src/video-player/README.md

@@ -36,3 +36,26 @@ const videoPlayer = new LunaVideoPlayer(container, {
 
 videoPlayer.play()
 ```
+
+## Configuration
+
+* hotkey(boolean): Enable hotkey.
+* url(string): Video url.
+
+## Api
+
+### pause(): void
+
+Pause video.
+
+### play(): undefined | Promise<void>
+
+Play video.
+
+### seek(time: number): void
+
+Seek to specified time.
+
+### volume(percentage: number): void
+
+Set video volume.

src/video-player/index.ts

@@ -16,8 +16,11 @@ import Component, { IComponentOptions } from '../share/Component'
 const $document = $(document as any)
 const isIos = detectBrowser(navigator.userAgent).name === 'ios'
 
-interface IOptions extends IComponentOptions {
+/** IOptions */
+export interface IOptions extends IComponentOptions {
+  /** Video url. */
   url?: string
+  /** Enable hotkey. */
   hotkey?: boolean
 }
 
@@ -109,13 +112,15 @@ export default class VideoPlayer extends Component<IOptions> {
       this.video.src = options.url
     }
   }
+  /** Play video. */
   play() {
     if (!this.video.src) {
       return
     }
 
     return this.video.play()
   }
+  /** Pause video. */
   pause() {
     if (!this.video.src) {
       return
@@ -128,6 +133,7 @@ export default class VideoPlayer extends Component<IOptions> {
     this.$container.off('mousemove', this.onMouseMove)
     super.destroy()
   }
+  /** Seek to specified time. */
   seek(time: number) {
     if (!this.video.src) {
       return
@@ -138,6 +144,7 @@ export default class VideoPlayer extends Component<IOptions> {
 
     this.video.currentTime = time
   }
+  /** Set video volume. */
   volume(percentage: number) {
     percentage = clamp(percentage, 0, 1)
     this.video.volume = percentage
@@ -237,7 +244,20 @@ export default class VideoPlayer extends Component<IOptions> {
 
     if (this.options.hotkey) {
       $container.attr('tabindex', '-1')
-      hotkey.on('space', { element: container }, this.togglePlay)
+      const options = { element: container }
+      hotkey.on('space', options, this.togglePlay)
+      hotkey.on('left', options, () => {
+        this.seek(this.video.currentTime - 5)
+      })
+      hotkey.on('right', options, () => {
+        this.seek(this.video.currentTime + 5)
+      })
+      hotkey.on('up', options, () => {
+        this.volume(this.video.volume + 0.1)
+      })
+      hotkey.on('down', options, () => {
+        this.volume(this.video.volume - 0.1)
+      })
     }
   }
   private toggleFullscreen = () => {

src/video-player/package.json

@@ -1,6 +1,6 @@
 {
   "name": "video-player",
-  "version": "0.1.0",
+  "version": "1.0.0",
   "description": "Video player",
   "luna": {
     "icon": true

src/video-player/story.js

@@ -2,8 +2,8 @@ import 'luna-video-player.css'
 import story from '../share/story'
 import VideoPlayer from 'luna-video-player.js'
 import $ from 'licia/$'
-import h from 'licia/h'
 import readme from './README.md'
+import changelog from './CHANGELOG.md'
 import { text } from '@storybook/addon-knobs'
 
 const def = story(
@@ -30,6 +30,7 @@ const def = story(
   },
   {
     readme,
+    changelog,
     source: __STORY__,
   }
 )