cafe-video-player 1.1.7 → 1.1.8
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 +93 -0
- package/package.json +2 -2
- package/videoPlayerStyles.css +3990 -0
package/README.md
ADDED
|
@@ -0,0 +1,93 @@
|
|
|
1
|
+
# cafe-video-player
|
|
2
|
+
|
|
3
|
+
✔ Playing static and vod videos
|
|
4
|
+
|
|
5
|
+
## Installation
|
|
6
|
+
|
|
7
|
+
```
|
|
8
|
+
$ npm install --save cafe-video-player
|
|
9
|
+
$ yarn add cafe-video-player
|
|
10
|
+
|
|
11
|
+
```
|
|
12
|
+
## Example
|
|
13
|
+
|
|
14
|
+
✔ To use the player to play the vod, you need to give the following props to the VideoPlayerLibrary component. for example:
|
|
15
|
+
|
|
16
|
+
```jsx
|
|
17
|
+
import VideoPlayerLibrary from "../videoPlayerLibrary";
|
|
18
|
+
|
|
19
|
+
export default function Home() {
|
|
20
|
+
|
|
21
|
+
const params = {
|
|
22
|
+
id: "6623",
|
|
23
|
+
type: "vod",
|
|
24
|
+
}
|
|
25
|
+
|
|
26
|
+
return (
|
|
27
|
+
<div><VideoPlayerLibrary params={params} /></div>
|
|
28
|
+
);
|
|
29
|
+
}
|
|
30
|
+
|
|
31
|
+
```
|
|
32
|
+
|
|
33
|
+
## Example
|
|
34
|
+
|
|
35
|
+
✔ To use the player to play the static videos, you need to give the following props to the VideoPlayerLibrary component. for example::
|
|
36
|
+
|
|
37
|
+
```jsx
|
|
38
|
+
import VideoPlayerLibrary from "../videoPlayerLibrary";
|
|
39
|
+
|
|
40
|
+
export default function Home() {
|
|
41
|
+
|
|
42
|
+
const params = {
|
|
43
|
+
type: "mp4",
|
|
44
|
+
"e-url": "aHR0cHM6Ly9hYnJlaGFtcmFoaS5pci9vL3RXMHFONUQwWFB2R04wdGhJQUM1UUEv",
|
|
45
|
+
"e-cover": "aHR0cHM6Ly9hYnJlaGFtcmFoaS5pci9vL3RXMHFONUQwWFB2R04wdGhJQUM1UUEvP3RodW1iPXRydWU="
|
|
46
|
+
}
|
|
47
|
+
|
|
48
|
+
return (
|
|
49
|
+
<div><VideoPlayerLibrary params={params} /></div>
|
|
50
|
+
);
|
|
51
|
+
}
|
|
52
|
+
|
|
53
|
+
|
|
54
|
+
```
|
|
55
|
+
|
|
56
|
+
## Example
|
|
57
|
+
|
|
58
|
+
✔ To use the mini player feature, it is necessary to assign an id to the element on which the scroll happens and then give that id to the player as props.
|
|
59
|
+
|
|
60
|
+
```jsx
|
|
61
|
+
import VideoPlayerLibrary from "../videoPlayerLibrary";
|
|
62
|
+
|
|
63
|
+
export default function Home() {
|
|
64
|
+
|
|
65
|
+
const params = {
|
|
66
|
+
type: "mp4",
|
|
67
|
+
"e-url": "aHR0cHM6Ly9hYnJlaGFtcmFoaS5pci9vL3RXMHFONUQwWFB2R04wdGhJQUM1UUEv",
|
|
68
|
+
"e-cover": "aHR0cHM6Ly9hYnJlaGFtcmFoaS5pci9vL3RXMHFONUQwWFB2R04wdGhJQUM1UUEvP3RodW1iPXRydWU=",
|
|
69
|
+
scrollElementId: "element-scroll-id"
|
|
70
|
+
}
|
|
71
|
+
|
|
72
|
+
return (
|
|
73
|
+
<div><VideoPlayerLibrary params={params} /></div>
|
|
74
|
+
);
|
|
75
|
+
}
|
|
76
|
+
|
|
77
|
+
```
|
|
78
|
+
|
|
79
|
+
To open the modals, you must put the following element at the end of the body in the _document component.
|
|
80
|
+
|
|
81
|
+
```jsx
|
|
82
|
+
|
|
83
|
+
<div id="dialog-react-root-videoPlayer" />
|
|
84
|
+
|
|
85
|
+
```
|
|
86
|
+
|
|
87
|
+
In order for the styles to be displayed correctly, you must import the videoPlayerStyles.css file from the node_module into the _app component
|
|
88
|
+
|
|
89
|
+
```jsx
|
|
90
|
+
|
|
91
|
+
import "../node_modules/cafe-video-player/videoPlayerStyles.css"
|
|
92
|
+
|
|
93
|
+
```
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "cafe-video-player",
|
|
3
|
-
"version": "1.1.
|
|
3
|
+
"version": "1.1.8",
|
|
4
4
|
"private": false,
|
|
5
5
|
"main": "./dist/index.js",
|
|
6
6
|
"module": "./dist/index.cjs",
|
|
@@ -11,7 +11,7 @@
|
|
|
11
11
|
"start": "next start",
|
|
12
12
|
"lint": "next lint",
|
|
13
13
|
"tailwind-build": "npx tailwindcss -i ./src/app/globals.css -o ./dist/videoPlayerStyles.css",
|
|
14
|
-
"tsup-publish": "tsup && @powershell copy package.json ./dist && copy README.md ./dist && npm run tailwind-build"
|
|
14
|
+
"tsup-publish": "tsup && @powershell copy package.json ./dist && @powershell copy README.md ./dist && npm run tailwind-build"
|
|
15
15
|
},
|
|
16
16
|
"dependencies": {
|
|
17
17
|
"@reduxjs/toolkit": "^2.2.3",
|