react-riyils 1.0.0 → 1.0.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 +60 -0
- package/package.json +2 -2
package/README.md
CHANGED
|
@@ -82,6 +82,7 @@ function App() {
|
|
|
82
82
|
| `progressBarColor` | `string` | `'#3B82F6'` | Progress bar color |
|
|
83
83
|
| `videoDurationLimit` | `number` | `10` | Auto-next after seconds |
|
|
84
84
|
| `autoPlay` | `boolean` | `true` | Auto-play videos |
|
|
85
|
+
| `translations` | `ReactRiyilsTranslations` | optional | Custom UI text translations |
|
|
85
86
|
|
|
86
87
|
### RiyilsViewer Props
|
|
87
88
|
|
|
@@ -92,6 +93,7 @@ function App() {
|
|
|
92
93
|
| `onClose` | `() => void` | - | Close handler |
|
|
93
94
|
| `onVideoChange` | `(index: number) => void` | - | Change handler |
|
|
94
95
|
| `progressBarColor` | `string` | `'#FF0000'` | Progress bar color |
|
|
96
|
+
| `translations` | `RiyilsTranslations` | optional | Custom UI text translations |
|
|
95
97
|
|
|
96
98
|
### Video Type
|
|
97
99
|
|
|
@@ -104,6 +106,64 @@ interface Video {
|
|
|
104
106
|
}
|
|
105
107
|
```
|
|
106
108
|
|
|
109
|
+
### Translations Usage
|
|
110
|
+
|
|
111
|
+
You can customize all UI texts by providing the `translations` prop to both components.
|
|
112
|
+
|
|
113
|
+
#### ReactRiyilsTranslations
|
|
114
|
+
|
|
115
|
+
```typescript
|
|
116
|
+
interface ReactRiyilsTranslations {
|
|
117
|
+
watchFullVideo: string; // Label for the "Watch Full Video" button
|
|
118
|
+
videoProgress: string; // Label for the video progress indicator
|
|
119
|
+
}
|
|
120
|
+
```
|
|
121
|
+
|
|
122
|
+
#### RiyilsTranslations
|
|
123
|
+
|
|
124
|
+
```typescript
|
|
125
|
+
interface RiyilsTranslations {
|
|
126
|
+
swipe: string; // "Swipe" tip text
|
|
127
|
+
close: string; // Close button label
|
|
128
|
+
mute: string; // Mute label
|
|
129
|
+
unmute: string; // Unmute label
|
|
130
|
+
speedIndicator: string; // Speed indicator (e.g., "2x")
|
|
131
|
+
videoViewer: string; // Dialog title
|
|
132
|
+
videoInteractionArea: string; // Video interaction area label
|
|
133
|
+
}
|
|
134
|
+
```
|
|
135
|
+
|
|
136
|
+
#### Example Usage
|
|
137
|
+
|
|
138
|
+
```jsx
|
|
139
|
+
<ReactRiyils
|
|
140
|
+
videos={videos}
|
|
141
|
+
currentIndex={currentIndex}
|
|
142
|
+
onVideoClick={(index) => setShowViewer(true)}
|
|
143
|
+
onVideoChange={setCurrentIndex}
|
|
144
|
+
translations={{
|
|
145
|
+
watchFullVideo: 'Watch the Full Video',
|
|
146
|
+
videoProgress: 'Video progress',
|
|
147
|
+
}}
|
|
148
|
+
/>
|
|
149
|
+
|
|
150
|
+
<RiyilsViewer
|
|
151
|
+
videos={videos}
|
|
152
|
+
initialIndex={currentIndex}
|
|
153
|
+
onClose={() => setShowViewer(false)}
|
|
154
|
+
onVideoChange={setCurrentIndex}
|
|
155
|
+
translations={{
|
|
156
|
+
swipe: 'Swipe',
|
|
157
|
+
close: 'Close',
|
|
158
|
+
mute: 'Mute',
|
|
159
|
+
unmute: 'Unmute',
|
|
160
|
+
speedIndicator: '2x',
|
|
161
|
+
videoViewer: 'Video Viewer',
|
|
162
|
+
videoInteractionArea: 'Video interaction area',
|
|
163
|
+
}}
|
|
164
|
+
/>
|
|
165
|
+
```
|
|
166
|
+
|
|
107
167
|
## Lazy Loading / Infinite Scroll
|
|
108
168
|
|
|
109
169
|
```jsx
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "react-riyils",
|
|
3
|
-
"version": "1.0.
|
|
3
|
+
"version": "1.0.1",
|
|
4
4
|
"description": "A React component library for creating Instagram/TikTok-style vertical video swiper",
|
|
5
5
|
"main": "dist/index.js",
|
|
6
6
|
"module": "dist/index.esm.js",
|
|
@@ -76,4 +76,4 @@
|
|
|
76
76
|
"url": "https://github.com/illegal-instruction-co/react-riyils/issues"
|
|
77
77
|
},
|
|
78
78
|
"type": "module"
|
|
79
|
-
}
|
|
79
|
+
}
|