Skip to content

Commit b052e59

Browse files
aman-imagekitaman-imagekit
committed
feat: added logic to skip preparing urls once prepared in playlist
1 parent eab6297 commit b052e59

11 files changed

Lines changed: 551 additions & 143 deletions

File tree

‎examples/javascript/src/shoppable.ts‎

Lines changed: 247 additions & 34 deletions
Original file line numberDiff line numberDiff line change
@@ -63,38 +63,251 @@ const player = videoPlayer('player', {
6363
player.src({
6464
src: 'https://ik.imagekit.io/demo/sample-video.mp4',
6565
shoppable: {
66-
startState: 'openOnPlay',
67-
autoClose: 5,
68-
products: [
69-
{
70-
productId: 'sunglasses_01',
71-
productName: 'Classic Aviators',
72-
imageUrl: 'https://ik.imagekit.io/demo/p/sunglasses.jpeg',
73-
highlightTime: { start: 2, end: 5 },
74-
onClick: {
75-
action: 'seek',
76-
args: { time: '00:03' }
77-
},
78-
onHover: {
79-
action: 'overlay',
80-
args: 'Featured Sunglasses'
81-
}
82-
},
83-
{
84-
productId: 'watch_02',
85-
productName: 'Chronograph Watch',
86-
imageUrl: 'https://ik.imagekit.io/demo/p/watch.jpeg',
87-
highlightTime: { start: 6, end: 9 },
88-
onClick: {
89-
action: 'goto',
90-
args: { url: 'https://imagekit.io' },
91-
pause: true
92-
},
93-
onHover: {
94-
action: 'switch',
95-
args: { url: 'https://ik.imagekit.io/demo/p/watch_2.jpeg' }
96-
}
97-
}
98-
]
99-
}
66+
transformation: [{ height: "300", width: "400" }],
67+
products: [
68+
{
69+
productId: 1,
70+
productName: "Classic Aviators",
71+
highlightTime: { start: 0, end: 2 },
72+
imageUrl: "https://ik.imagekit.io/a1yisxurxo/women_in_red_2nd_test_L0pnP7Hb3.jpg?updatedAt=1744896751866",
73+
hotspots: [
74+
{
75+
time: "00:02",
76+
x: "50%",
77+
y: "50%",
78+
tooltipPosition: "left",
79+
clickUrl: "https://imagekit.io/dashboard/media-library/detail/680102eb432c476416cdd342"
80+
}
81+
],
82+
onHover: {
83+
action: "overlay",
84+
args: "Click to see this product in the video"
85+
},
86+
onClick: {
87+
action: "seek",
88+
pause: 5,
89+
args: { time: "00:02" }
90+
}
91+
},
92+
{
93+
productId: 1,
94+
productName: "Chronograph Watch",
95+
highlightTime: { start: 0, end: 2 },
96+
imageUrl: "https://ik.imagekit.io/a1yisxurxo/women_in_red_2nd_test_L0pnP7Hb3.jpg?updatedAt=1744896751866",
97+
hotspots: [
98+
{
99+
time: "00:02",
100+
x: "50%",
101+
y: "50%",
102+
tooltipPosition: "left",
103+
clickUrl: "https://imagekit.io/dashboard/media-library/detail/680102eb432c476416cdd342"
104+
}
105+
],
106+
onHover: {
107+
action: "overlay",
108+
args: "Click to see this product in the video"
109+
},
110+
onClick: {
111+
action: "seek",
112+
pause: 5,
113+
args: { time: "00:02" }
114+
}
115+
},
116+
{
117+
productId: 1,
118+
productName: "Hat",
119+
highlightTime: { start: 0, end: 2 },
120+
imageUrl: "https://ik.imagekit.io/a1yisxurxo/women_in_red_2nd_test_L0pnP7Hb3.jpg?updatedAt=1744896751866",
121+
hotspots: [
122+
{
123+
time: "00:02",
124+
x: "50%",
125+
y: "50%",
126+
tooltipPosition: "left",
127+
clickUrl: "https://imagekit.io/dashboard/media-library/detail/680102eb432c476416cdd342"
128+
}
129+
],
130+
onHover: {
131+
action: "overlay",
132+
args: "Click to see this product in the video"
133+
},
134+
onClick: {
135+
action: "seek",
136+
pause: 5,
137+
args: { time: "00:04" }
138+
}
139+
},
140+
{
141+
productId: 1,
142+
productName: "Shorts",
143+
highlightTime: { start: 0, end: 2 },
144+
imageUrl: "https://ik.imagekit.io/a1yisxurxo/women_in_red_2nd_test_L0pnP7Hb3.jpg?updatedAt=1744896751866",
145+
hotspots: [
146+
{
147+
time: "00:02",
148+
x: "50%",
149+
y: "50%",
150+
tooltipPosition: "left",
151+
clickUrl: "https://imagekit.io/dashboard/media-library/detail/680102eb432c476416cdd342"
152+
}
153+
],
154+
onHover: {
155+
action: "overlay",
156+
args: "Click to see this product in the video"
157+
},
158+
onClick: {
159+
action: "seek",
160+
pause: 5,
161+
args: { time: "00:06" }
162+
}
163+
},
164+
{
165+
productId: 1,
166+
productName: "Shorts",
167+
highlightTime: { start: 0, end: 2 },
168+
imageUrl: "https://ik.imagekit.io/a1yisxurxo/women_in_red_2nd_test_L0pnP7Hb3.jpg?updatedAt=1744896751866",
169+
hotspots: [
170+
{
171+
time: "00:02",
172+
x: "50%",
173+
y: "50%",
174+
tooltipPosition: "left",
175+
clickUrl: "https://imagekit.io/dashboard/media-library/detail/680102eb432c476416cdd342"
176+
}
177+
],
178+
onHover: {
179+
action: "overlay",
180+
args: "Click to see this product in the video"
181+
},
182+
onClick: {
183+
action: "seek",
184+
pause: 5,
185+
args: { time: "00:06" }
186+
}
187+
},
188+
{
189+
productId: 1,
190+
productName: "Shorts",
191+
highlightTime: { start: 0, end: 2 },
192+
imageUrl: "https://ik.imagekit.io/a1yisxurxo/women_in_red_2nd_test_L0pnP7Hb3.jpg?updatedAt=1744896751866",
193+
hotspots: [
194+
{
195+
time: "00:02",
196+
x: "50%",
197+
y: "50%",
198+
tooltipPosition: "left",
199+
clickUrl: "https://imagekit.io/dashboard/media-library/detail/680102eb432c476416cdd342"
200+
}
201+
],
202+
onHover: {
203+
action: "overlay",
204+
args: "Click to see this product in the video"
205+
},
206+
onClick: {
207+
action: "seek",
208+
pause: 5,
209+
args: { time: "00:06" }
210+
}
211+
},
212+
{
213+
productId: 1,
214+
productName: "Shorts",
215+
highlightTime: { start: 0, end: 2 },
216+
imageUrl: "https://ik.imagekit.io/a1yisxurxo/women_in_red_2nd_test_L0pnP7Hb3.jpg?updatedAt=1744896751866",
217+
hotspots: [
218+
{
219+
time: "00:02",
220+
x: "50%",
221+
y: "50%",
222+
tooltipPosition: "left",
223+
clickUrl: "https://imagekit.io/dashboard/media-library/detail/680102eb432c476416cdd342"
224+
}
225+
],
226+
onHover: {
227+
action: "overlay",
228+
args: "Click to see this product in the video"
229+
},
230+
onClick: {
231+
action: "seek",
232+
pause: 5,
233+
args: { time: "00:06" }
234+
}
235+
},
236+
{
237+
productId: 1,
238+
productName: "Shorts",
239+
highlightTime: { start: 0, end: 2 },
240+
imageUrl: "https://ik.imagekit.io/a1yisxurxo/women_in_red_2nd_test_L0pnP7Hb3.jpg?updatedAt=1744896751866",
241+
hotspots: [
242+
{
243+
time: "00:02",
244+
x: "50%",
245+
y: "50%",
246+
tooltipPosition: "left",
247+
clickUrl: "https://imagekit.io/dashboard/media-library/detail/680102eb432c476416cdd342"
248+
}
249+
],
250+
onHover: {
251+
action: "overlay",
252+
args: "Click to see this product in the video"
253+
},
254+
onClick: {
255+
action: "seek",
256+
pause: 5,
257+
args: { time: "00:06" }
258+
}
259+
},
260+
{
261+
productId: 1,
262+
productName: "Shorts",
263+
highlightTime: { start: 0, end: 2 },
264+
imageUrl: "https://ik.imagekit.io/a1yisxurxo/women_in_red_2nd_test_L0pnP7Hb3.jpg?updatedAt=1744896751866",
265+
hotspots: [
266+
{
267+
time: "00:02",
268+
x: "50%",
269+
y: "50%",
270+
tooltipPosition: "left",
271+
clickUrl: "https://imagekit.io/dashboard/media-library/detail/680102eb432c476416cdd342"
272+
}
273+
],
274+
onHover: {
275+
action: "overlay",
276+
args: "Click to see this product in the video"
277+
},
278+
onClick: {
279+
action: "seek",
280+
pause: 5,
281+
args: { time: "00:06" }
282+
}
283+
},
284+
{
285+
productId: 1,
286+
productName: "Shorts",
287+
highlightTime: { start: 0, end: 2 },
288+
imageUrl: "https://ik.imagekit.io/a1yisxurxo/women_in_red_2nd_test_L0pnP7Hb3.jpg?updatedAt=1744896751866",
289+
hotspots: [
290+
{
291+
time: "00:02",
292+
x: "50%",
293+
y: "50%",
294+
tooltipPosition: "left",
295+
clickUrl: "https://imagekit.io/dashboard/media-library/detail/680102eb432c476416cdd342"
296+
}
297+
],
298+
onHover: {
299+
action: "overlay",
300+
args: "Click to see this product in the video"
301+
},
302+
onClick: {
303+
action: "seek",
304+
pause: 5,
305+
args: { time: "00:06" }
306+
}
307+
},
308+
// …two more products…
309+
],
310+
showPostPlayOverlay: true,
311+
autoClose: false
312+
}
100313
});

‎examples/javascript/src/subtitles.ts‎

Lines changed: 4 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -53,18 +53,17 @@ player.src({
5353
src: 'https://ik.imagekit.io/demo/sample-video.mp4',
5454
textTracks: [
5555
{
56-
src: 'https://ik.imagekit.io/demo/subtitles_en.vtt',
57-
kind: 'subtitles',
58-
srclang: 'en',
59-
label: 'English',
60-
default: true,
56+
autoGenerateSubtitles: true,
57+
maxWords: 4,
58+
wordHighlight: true,
6159
},
6260
{
6361
autoGenerateSubtitles: true,
6462
translate: [
6563
{
6664
langCode: 'fr',
6765
label: 'French (AI)',
66+
default: true,
6867
},
6968
{
7069
langCode: 'de',

0 commit comments

Comments
 (0)