@rxdrag/website-lib-core 0.0.30 → 0.0.31

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.
Files changed (2) hide show
  1. package/package.json +5 -5
  2. package/src/react/components/Medias/index.tsx +117 -113
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@rxdrag/website-lib-core",
3
- "version": "0.0.30",
3
+ "version": "0.0.31",
4
4
  "type": "module",
5
5
  "exports": {
6
6
  ".": "./index.ts"
@@ -24,10 +24,10 @@
24
24
  "@types/react-dom": "^18.2.7",
25
25
  "eslint": "^7.32.0",
26
26
  "typescript": "^5",
27
- "@rxdrag/entify-hooks": "0.2.49",
28
- "@rxdrag/tsconfig": "0.2.0",
27
+ "@rxdrag/entify-hooks": "0.2.50",
28
+ "@rxdrag/slate-preview": "1.2.57",
29
29
  "@rxdrag/eslint-config-custom": "0.2.12",
30
- "@rxdrag/slate-preview": "1.2.57"
30
+ "@rxdrag/tsconfig": "0.2.0"
31
31
  },
32
32
  "dependencies": {
33
33
  "clsx": "^2.1.0",
@@ -35,7 +35,7 @@
35
35
  "lodash-es": "^4.17.21",
36
36
  "react": "^18.2.0",
37
37
  "react-dom": "^18.2.0",
38
- "@rxdrag/rxcms-models": "0.3.57"
38
+ "@rxdrag/rxcms-models": "0.3.58"
39
39
  },
40
40
  "peerDependencies": {
41
41
  "astro": "^4.0.0 || ^5.0.0"
package/src/react/components/Medias/index.tsx CHANGED
@@ -13,7 +13,7 @@ export type MediasProps = {
13
13
  mainArea?: string;
14
14
  navigation?: string;
15
15
  thumbnail?: string;
16
- }
16
+ };
17
17
  };
18
18
 
19
19
  export const Medias = forwardRef<HTMLDivElement, MediasProps>((props, ref) => {
@@ -61,7 +61,9 @@ export const Medias = forwardRef<HTMLDivElement, MediasProps>((props, ref) => {
61
61
  : value.externalVideoUrl.split("v=")[1]?.split("&")[0];
62
62
 
63
63
  if (videoId) {
64
- setThumbnailUrl(`https://img.youtube.com/vi/${videoId}/hqdefault.jpg`);
64
+ setThumbnailUrl(
65
+ `https://img.youtube.com/vi/${videoId}/maxresdefault.jpg`
66
+ );
65
67
  }
66
68
  }
67
69
  }, [value?.externalVideoUrl]);
@@ -218,135 +220,137 @@ export const Medias = forwardRef<HTMLDivElement, MediasProps>((props, ref) => {
218
220
  </div>
219
221
 
220
222
  {/* Thumbnail navigation */}
221
- <div className={clsx("relative mt-4", navigation)}>
222
- <div className="flex items-stretch gap-2">
223
- {totalItems > 6 && (
224
- <button
225
- onClick={handlePrevious}
226
- disabled={!canPrevious}
227
- className={clsx(
228
- "flex items-center justify-center w-6",
229
- "transition-colors duration-200 rounded-l-md",
230
- !canPrevious
231
- ? "bg-gray-100 text-gray-400 cursor-not-allowed"
232
- : "bg-gray-200 hover:bg-gray-300 text-gray-700",
233
- thumbnail,
234
- )}
235
- aria-label="Previous"
236
- >
237
- <svg
238
- xmlns="http://www.w3.org/2000/svg"
239
- className="h-4 w-4 md:h-5 md:w-5"
240
- fill="none"
241
- viewBox="0 0 24 24"
242
- stroke="currentColor"
223
+ {totalItems > 1 && (
224
+ <div className={clsx("relative mt-4", navigation)}>
225
+ <div className="flex items-stretch gap-2">
226
+ {totalItems > 6 && (
227
+ <button
228
+ onClick={handlePrevious}
229
+ disabled={!canPrevious}
230
+ className={clsx(
231
+ "flex items-center justify-center w-6",
232
+ "transition-colors duration-200 rounded-l-md",
233
+ !canPrevious
234
+ ? "bg-gray-100 text-gray-400 cursor-not-allowed"
235
+ : "bg-gray-200 hover:bg-gray-300 text-gray-700",
236
+ thumbnail
237
+ )}
238
+ aria-label="Previous"
243
239
  >
244
- <path
245
- strokeLinecap="round"
246
- strokeLinejoin="round"
247
- strokeWidth={2}
248
- d="M15 19l-7-7 7-7"
249
- />
250
- </svg>
251
- </button>
252
- )}
253
- <div className="flex-1">
254
- <div className="grid grid-cols-6 gap-2">
255
- {value?.externalVideoUrl && startIndex === 0 && (
256
- <div
257
- className={clsx(
258
- "relative cursor-pointer overflow-hidden rounded-sm border-2",
259
- thumbnailAspect,
260
- selectedId === "video"
261
- ? "border-primary-500"
262
- : "border-transparent hover:border-primary-300"
263
- )}
264
- onClick={() => setSelectedId("video")}
240
+ <svg
241
+ xmlns="http://www.w3.org/2000/svg"
242
+ className="h-4 w-4 md:h-5 md:w-5"
243
+ fill="none"
244
+ viewBox="0 0 24 24"
245
+ stroke="currentColor"
265
246
  >
266
- <img
267
- src={thumbnailUrl}
268
- alt="Video thumbnail"
269
- className="w-full h-full object-cover"
247
+ <path
248
+ strokeLinecap="round"
249
+ strokeLinejoin="round"
250
+ strokeWidth={2}
251
+ d="M15 19l-7-7 7-7"
270
252
  />
271
- <div className="absolute inset-0 flex items-center justify-center bg-black/30">
272
- <svg
273
- xmlns="http://www.w3.org/2000/svg"
274
- className="h-8 w-8 text-white"
275
- viewBox="0 0 24 24"
276
- >
277
- <path
278
- fill="currentColor"
279
- fill-rule="evenodd"
280
- d="M12 22c5.523 0 10-4.477 10-10S17.523 2 12 2S2 6.477 2 12s4.477 10 10 10"
281
- clipRule="evenodd"
282
- opacity="0.5"
283
- />
284
- <path
285
- fill="currentColor"
286
- d="m15.414 13.059l-4.72 2.787C9.934 16.294 9 15.71 9 14.786V9.214c0-.924.934-1.507 1.694-1.059l4.72 2.787c.781.462.781 1.656 0 2.118"
287
- />
288
- </svg>
289
- </div>
290
- </div>
291
- )}
292
- {value?.medias?.map((media, index) => {
293
- const adjustedIndex = value?.externalVideoUrl
294
- ? index + 1
295
- : index;
296
- return adjustedIndex >= startIndex &&
297
- adjustedIndex < endIndex ? (
253
+ </svg>
254
+ </button>
255
+ )}
256
+ <div className="flex-1">
257
+ <div className="grid grid-cols-6 gap-2">
258
+ {value?.externalVideoUrl && startIndex === 0 && (
298
259
  <div
299
- key={media.id}
300
260
  className={clsx(
301
261
  "relative cursor-pointer overflow-hidden rounded-sm border-2",
302
262
  thumbnailAspect,
303
- selectedId === media.id
263
+ selectedId === "video"
304
264
  ? "border-primary-500"
305
265
  : "border-transparent hover:border-primary-300"
306
266
  )}
307
- onClick={() => setSelectedId(media.id)}
267
+ onClick={() => setSelectedId("video")}
308
268
  >
309
269
  <img
310
- src={media?.resize || media?.url}
311
- alt={media?.alt}
270
+ src={thumbnailUrl}
271
+ alt="Video thumbnail"
312
272
  className="w-full h-full object-cover"
313
273
  />
274
+ <div className="absolute inset-0 flex items-center justify-center bg-black/30">
275
+ <svg
276
+ xmlns="http://www.w3.org/2000/svg"
277
+ className="h-8 w-8 text-white"
278
+ viewBox="0 0 24 24"
279
+ >
280
+ <path
281
+ fill="currentColor"
282
+ fill-rule="evenodd"
283
+ d="M12 22c5.523 0 10-4.477 10-10S17.523 2 12 2S2 6.477 2 12s4.477 10 10 10"
284
+ clipRule="evenodd"
285
+ opacity="0.5"
286
+ />
287
+ <path
288
+ fill="currentColor"
289
+ d="m15.414 13.059l-4.72 2.787C9.934 16.294 9 15.71 9 14.786V9.214c0-.924.934-1.507 1.694-1.059l4.72 2.787c.781.462.781 1.656 0 2.118"
290
+ />
291
+ </svg>
292
+ </div>
314
293
  </div>
315
- ) : null;
316
- })}
294
+ )}
295
+ {value?.medias?.map((media, index) => {
296
+ const adjustedIndex = value?.externalVideoUrl
297
+ ? index + 1
298
+ : index;
299
+ return adjustedIndex >= startIndex &&
300
+ adjustedIndex < endIndex ? (
301
+ <div
302
+ key={media.id}
303
+ className={clsx(
304
+ "relative cursor-pointer overflow-hidden rounded-sm border-2",
305
+ thumbnailAspect,
306
+ selectedId === media.id
307
+ ? "border-primary-500"
308
+ : "border-transparent hover:border-primary-300"
309
+ )}
310
+ onClick={() => setSelectedId(media.id)}
311
+ >
312
+ <img
313
+ src={media?.resize || media?.url}
314
+ alt={media?.alt}
315
+ className="w-full h-full object-cover"
316
+ />
317
+ </div>
318
+ ) : null;
319
+ })}
320
+ </div>
317
321
  </div>
318
- </div>
319
- {totalItems > 6 && (
320
- <button
321
- onClick={handleNext}
322
- disabled={!canNext}
323
- className={clsx(
324
- "flex items-center justify-center w-6",
325
- "transition-colors duration-200 rounded-r-md",
326
- !canNext
327
- ? "bg-gray-100 text-gray-400 cursor-not-allowed"
328
- : "bg-gray-200 hover:bg-gray-300 text-gray-700"
329
- )}
330
- aria-label="Next"
331
- >
332
- <svg
333
- xmlns="http://www.w3.org/2000/svg"
334
- className="h-4 w-4 md:h-5 md:w-5"
335
- fill="none"
336
- viewBox="0 0 24 24"
337
- stroke="currentColor"
322
+ {totalItems > 6 && (
323
+ <button
324
+ onClick={handleNext}
325
+ disabled={!canNext}
326
+ className={clsx(
327
+ "flex items-center justify-center w-6",
328
+ "transition-colors duration-200 rounded-r-md",
329
+ !canNext
330
+ ? "bg-gray-100 text-gray-400 cursor-not-allowed"
331
+ : "bg-gray-200 hover:bg-gray-300 text-gray-700"
332
+ )}
333
+ aria-label="Next"
338
334
  >
339
- <path
340
- strokeLinecap="round"
341
- strokeLinejoin="round"
342
- strokeWidth={2}
343
- d="M9 5l7 7-7 7"
344
- />
345
- </svg>
346
- </button>
347
- )}
335
+ <svg
336
+ xmlns="http://www.w3.org/2000/svg"
337
+ className="h-4 w-4 md:h-5 md:w-5"
338
+ fill="none"
339
+ viewBox="0 0 24 24"
340
+ stroke="currentColor"
341
+ >
342
+ <path
343
+ strokeLinecap="round"
344
+ strokeLinejoin="round"
345
+ strokeWidth={2}
346
+ d="M9 5l7 7-7 7"
347
+ />
348
+ </svg>
349
+ </button>
350
+ )}
351
+ </div>
348
352
  </div>
349
- </div>
353
+ )}
350
354
  </div>
351
355
  );
352
356
  });