Skip to content

Commit ae53b59

Browse files
aman-imagekitaman-imagekit
committed
feat: update README for documentation link and enhance try-it-yourself example with transformation input and chapter subtitle improvements
1 parent b7a810f commit ae53b59

7 files changed

Lines changed: 78 additions & 27 deletions

File tree

‎README.md‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -33,4 +33,4 @@ The SDK is written in TypeScript, offering first-class TypeScript support. Enjoy
3333

3434
## Documentation
3535

36-
Refer to the [ImageKit official documentation](https://docs.imagekit.io/video-player/overview) for more details on how to use the SDK.
36+
Refer to the [ImageKit official documentation](https://imagekit.io/docs/video-player/overview) for more details on how to use the SDK.

‎examples/javascript/pages/try-it-yourself.html‎

Lines changed: 17 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -169,6 +169,14 @@
169169
.help-text a:hover {
170170
text-decoration: underline;
171171
}
172+
.help-text code {
173+
background-color: #f7fafc;
174+
padding: 0.125rem 0.25rem;
175+
border-radius: 3px;
176+
font-family: 'Courier New', monospace;
177+
font-size: 0.9em;
178+
color: #2d3748;
179+
}
172180
</style>
173181
</head>
174182
<body>
@@ -189,6 +197,12 @@ <h1>Try It Yourself</h1>
189197
<input type="url" id="src-url" name="src-url" placeholder="Enter video source URL" />
190198
</div>
191199

200+
<div class="form-group">
201+
<label for="transformation">Transformation (JSON, optional)</label>
202+
<input type="text" id="transformation" name="transformation" placeholder='[{"width": 800, "height": 600}]' />
203+
<div class="help-text">JSON array of transformation objects. Example: <code>[{"width": 800, "height": 600}]</code></div>
204+
</div>
205+
192206
<div class="form-group">
193207
<div class="checkbox-item">
194208
<input type="checkbox" id="enable-signer" name="enable-signer" />
@@ -212,9 +226,9 @@ <h1>Try It Yourself</h1>
212226
</div>
213227
<div id="subtitles-options" class="sub-options" style="display: none;">
214228
<div class="form-group">
215-
<label for="max-words">Max Words (optional)</label>
216-
<input type="number" id="max-words" name="max-words" min="1" placeholder="e.g., 4" />
217-
<div class="help-text">Maximum number of words to display per subtitle line</div>
229+
<label for="max-chars">Max Chars (optional)</label>
230+
<input type="number" id="max-chars" name="max-chars" min="1" placeholder="e.g., 60" />
231+
<div class="help-text">Maximum number of characters that can appear on a subtitle frame</div>
218232
</div>
219233
<div class="checkbox-item">
220234
<input type="checkbox" id="word-highlight" name="word-highlight" />

‎examples/javascript/src/chapters.ts‎

Lines changed: 17 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -23,6 +23,22 @@ const videoSrc = 'https://stage-ik.imagekit.io/a8fli6vdg/New%20Folder33/JackMa_R
2323
const srcConfigAuto = {
2424
src: videoSrc,
2525
chapters: true,
26+
textTracks: [
27+
{
28+
autoGenerate: true as const,
29+
translations: [
30+
{
31+
langCode: 'hi' as const,
32+
label: 'Hindi (AI)',
33+
default: true,
34+
},
35+
{
36+
langCode: 'de' as const,
37+
label: 'German (AI)',
38+
},
39+
],
40+
}
41+
],
2642
};
2743

2844
// Method 2: Load from VTT URL
@@ -66,7 +82,7 @@ tabButtons.forEach((button) => {
6682
button.classList.add('active');
6783

6884
const tabName = button.getAttribute('data-tab');
69-
85+
7086
// Update source config based on selected tab
7187
switch (tabName) {
7288
case 'auto':

‎examples/javascript/src/subtitles.ts‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -21,7 +21,7 @@ const srcConfig = {
2121
textTracks: [
2222
{
2323
autoGenerate: true,
24-
maxWordsPerLine: 4,
24+
maxChars: 20,
2525
highlightWords: true,
2626
},
2727
{

‎examples/javascript/src/try-it-yourself.ts‎

Lines changed: 40 additions & 14 deletions
Original file line numberDiff line numberDiff line change
@@ -4,7 +4,8 @@ import type {
44
IKPlayerOptions,
55
SourceOptions,
66
RemoteTextTrackOptions,
7-
AutoGeneratedTextTrackOptions
7+
AutoGeneratedTextTrackOptions,
8+
Transformation
89
} from '@imagekit/video-player';
910
import type Player from 'video.js/dist/types/player';
1011

@@ -58,10 +59,11 @@ function buildPlayerConfig(
5859
imagekitId: string,
5960
srcUrl: string,
6061
features: string[],
61-
maxWords?: number,
62+
maxChars?: number,
6263
wordHighlight?: boolean,
6364
translationLangs?: Array<{ label?: string; langCode: string }>,
64-
signerUrl?: string
65+
signerUrl?: string,
66+
transformation?: Transformation[]
6567
): { playerOptions: IKPlayerOptions; srcConfig: SourceOptions } {
6668
// Build player options
6769
const playerOptions: IKPlayerOptions = {
@@ -107,6 +109,10 @@ function buildPlayerConfig(
107109
src: srcUrl,
108110
};
109111

112+
if (transformation && transformation.length > 0) {
113+
srcConfig.transformation = transformation;
114+
}
115+
110116
if (features.includes('chapters')) {
111117
srcConfig.chapters = true;
112118
}
@@ -121,8 +127,8 @@ function buildPlayerConfig(
121127
autoGenerate: true,
122128
};
123129

124-
if (maxWords !== undefined && maxWords > 0) {
125-
subtitleConfig.maxWordsPerLine = maxWords;
130+
if (maxChars !== undefined && maxChars > 0) {
131+
subtitleConfig.maxChars = maxChars;
126132
}
127133
if (wordHighlight) {
128134
subtitleConfig.highlightWords = true;
@@ -173,19 +179,21 @@ function generateCode(
173179
imagekitId: string,
174180
srcUrl: string,
175181
features: string[],
176-
maxWords?: number,
182+
maxChars?: number,
177183
wordHighlight?: boolean,
178184
translationLangs?: Array<{ label?: string; langCode: string }>,
179-
signerUrl?: string
185+
signerUrl?: string,
186+
transformation?: Transformation[]
180187
): string {
181188
const { playerOptions, srcConfig } = buildPlayerConfig(
182189
imagekitId,
183190
srcUrl,
184191
features,
185-
maxWords,
192+
maxChars,
186193
wordHighlight,
187194
translationLangs,
188-
signerUrl
195+
signerUrl,
196+
transformation
189197
);
190198

191199
// Keep video.js options in one place so displayed code always matches runtime config
@@ -244,8 +252,8 @@ function updatePlayer() {
244252
}
245253

246254
// Get subtitle options
247-
const maxWordsInput = document.getElementById('max-words') as HTMLInputElement;
248-
const maxWords = maxWordsInput?.value ? parseInt(maxWordsInput.value, 10) : undefined;
255+
const maxCharsInput = document.getElementById('max-chars') as HTMLInputElement;
256+
const maxChars = maxCharsInput?.value ? parseInt(maxCharsInput.value, 10) : undefined;
249257
const wordHighlight = (document.getElementById('word-highlight') as HTMLInputElement)?.checked || false;
250258

251259
// Get translation languages from the list
@@ -267,19 +275,37 @@ function updatePlayer() {
267275
const signerUrlInput = document.getElementById('signer-url') as HTMLInputElement;
268276
const signerUrl = enableSigner && signerUrlInput?.value.trim() ? signerUrlInput.value.trim() : undefined;
269277

278+
// Get transformation
279+
const transformationInput = (document.getElementById('transformation') as HTMLInputElement)?.value.trim() || '';
280+
let transformation: Transformation[] | undefined = undefined;
281+
if (transformationInput) {
282+
try {
283+
const parsed = JSON.parse(transformationInput);
284+
if (Array.isArray(parsed)) {
285+
transformation = parsed;
286+
} else {
287+
console.warn('Transformation must be a JSON array');
288+
}
289+
} catch (e) {
290+
alert('Invalid transformation JSON. Please check the format.');
291+
return;
292+
}
293+
}
294+
270295
// Build configuration using shared function
271296
const { playerOptions, srcConfig } = buildPlayerConfig(
272297
imagekitId,
273298
srcUrl,
274299
features,
275-
maxWords,
300+
maxChars,
276301
wordHighlight,
277302
translationLangsForConfig,
278-
signerUrl
303+
signerUrl,
304+
transformation
279305
);
280306

281307
// Generate and display code
282-
const code = generateCode(imagekitId, srcUrl, features, maxWords, wordHighlight, translationLangsForConfig, signerUrl);
308+
const code = generateCode(imagekitId, srcUrl, features, maxChars, wordHighlight, translationLangsForConfig, signerUrl, transformation);
283309
document.getElementById('code-display')!.textContent = code;
284310

285311
// Get the video element before disposing

‎examples/react/src/App.tsx‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -57,7 +57,7 @@ export default function App() {
5757
textTracks: [
5858
{
5959
autoGenerate: true,
60-
maxWordsPerLine: 4,
60+
maxChars: 60,
6161
highlightWords: true,
6262
default: true // Indicates whether this track is active by default
6363
}]
@@ -84,7 +84,7 @@ export default function App() {
8484
controls: true,
8585
muted: false,
8686
height: 540,
87-
width: 960,
87+
width: 524,
8888
}}
8989
playlist={playlist}
9090
/>

‎examples/vue/README.md‎

Lines changed: 0 additions & 5 deletions
This file was deleted.

0 commit comments

Comments
 (0)