@scarlett-player/ui 0.1.0 → 0.1.1
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/README.md +69 -0
- package/package.json +2 -2
package/README.md
ADDED
|
@@ -0,0 +1,69 @@
|
|
|
1
|
+
# @scarlett-player/ui
|
|
2
|
+
|
|
3
|
+
UI controls plugin for Scarlett Player. Provides a modern, customizable player interface.
|
|
4
|
+
|
|
5
|
+
## Installation
|
|
6
|
+
|
|
7
|
+
```bash
|
|
8
|
+
npm install @scarlett-player/core @scarlett-player/ui
|
|
9
|
+
```
|
|
10
|
+
|
|
11
|
+
## Usage
|
|
12
|
+
|
|
13
|
+
```typescript
|
|
14
|
+
import { ScarlettPlayer } from '@scarlett-player/core';
|
|
15
|
+
import { createHLSPlugin } from '@scarlett-player/hls';
|
|
16
|
+
import { uiPlugin } from '@scarlett-player/ui';
|
|
17
|
+
|
|
18
|
+
const player = new ScarlettPlayer({
|
|
19
|
+
container: document.getElementById('player'),
|
|
20
|
+
plugins: [
|
|
21
|
+
createHLSPlugin(),
|
|
22
|
+
uiPlugin({
|
|
23
|
+
theme: { accentColor: '#e50914' },
|
|
24
|
+
}),
|
|
25
|
+
],
|
|
26
|
+
});
|
|
27
|
+
```
|
|
28
|
+
|
|
29
|
+
## Features
|
|
30
|
+
|
|
31
|
+
- Play/pause, seek, volume controls
|
|
32
|
+
- Fullscreen toggle
|
|
33
|
+
- Quality selector
|
|
34
|
+
- Progress bar with buffering indicator
|
|
35
|
+
- Time display (current / duration)
|
|
36
|
+
- Keyboard shortcuts
|
|
37
|
+
- Customizable theming
|
|
38
|
+
- Auto-hide controls
|
|
39
|
+
|
|
40
|
+
## Keyboard Shortcuts
|
|
41
|
+
|
|
42
|
+
| Key | Action |
|
|
43
|
+
|-----|--------|
|
|
44
|
+
| Space / K | Play/Pause |
|
|
45
|
+
| M | Toggle mute |
|
|
46
|
+
| F | Toggle fullscreen |
|
|
47
|
+
| Left Arrow | Seek -5s |
|
|
48
|
+
| Right Arrow | Seek +5s |
|
|
49
|
+
| Up Arrow | Volume +10% |
|
|
50
|
+
| Down Arrow | Volume -10% |
|
|
51
|
+
|
|
52
|
+
## Theming
|
|
53
|
+
|
|
54
|
+
```typescript
|
|
55
|
+
uiPlugin({
|
|
56
|
+
theme: {
|
|
57
|
+
accentColor: '#e50914', // Progress bar, highlights
|
|
58
|
+
primaryColor: '#ffffff', // Text, icons
|
|
59
|
+
backgroundColor: 'rgba(0, 0, 0, 0.8)',
|
|
60
|
+
controlBarHeight: 48,
|
|
61
|
+
iconSize: 24,
|
|
62
|
+
},
|
|
63
|
+
hideDelay: 3000, // Auto-hide delay in ms
|
|
64
|
+
});
|
|
65
|
+
```
|
|
66
|
+
|
|
67
|
+
## License
|
|
68
|
+
|
|
69
|
+
MIT
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@scarlett-player/ui",
|
|
3
|
-
"version": "0.1.
|
|
3
|
+
"version": "0.1.1",
|
|
4
4
|
"description": "UI Controls Plugin for Scarlett Player",
|
|
5
5
|
"type": "module",
|
|
6
6
|
"main": "dist/index.cjs",
|
|
@@ -55,5 +55,5 @@
|
|
|
55
55
|
"bugs": {
|
|
56
56
|
"url": "https://github.com/Hackney-Enterprises-Inc/scarlett-player/issues"
|
|
57
57
|
},
|
|
58
|
-
"homepage": "https://
|
|
58
|
+
"homepage": "https://scarlettplayer.com"
|
|
59
59
|
}
|