@kkcompany/app-ui 0.1.10 → 0.1.12

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 (3) hide show
  1. package/dist/index.cjs +25 -18
  2. package/dist/index.mjs +25 -18
  3. package/package.json +1 -1
package/dist/index.cjs CHANGED
@@ -197,25 +197,21 @@ const tagBaseStyles = {
197
197
  gap: "0.4em",
198
198
  color: "var(--tag-color)",
199
199
  justifyContent: "var(--tag-justify-content, flex-start)",
200
- fontSize: "0.75rem",
200
+ fontSize: "0.625rem",
201
201
  wordBreak: "keep-all",
202
202
  "> div": {
203
- padding: "4px 6px",
203
+ padding: "0.4em 0.6em",
204
204
  borderRadius: "0.2em",
205
205
  fontWeight: 600,
206
206
  background: "var(--tag-background)",
207
- boxShadow: "0 2px 4px 0 rgba(0,0,0,0.25)",
208
- height: "18px",
209
- lineHeight: "18px"
207
+ boxShadow: "0 2px 4px 0 rgba(0,0,0,0.25)"
210
208
  }
211
209
  }
212
210
  };
213
- const tagTopStyles = { transformOrigin: "left top" };
214
211
  const tagBottomStyles = {
215
212
  "--tag-justify-content": "flex-end",
216
213
  "--tag-color": "#000",
217
- "--tag-background": "#fff",
218
- transformOrigin: "right bottom"
214
+ "--tag-background": "#fff"
219
215
  };
220
216
  const VideoThumbnail = ({ href, imageUrl, title, progress, topTags = [], bottomTags = [], children, slots = {}, onClick }) => {
221
217
  const components = {
@@ -229,6 +225,7 @@ const VideoThumbnail = ({ href, imageUrl, title, progress, topTags = [], bottomT
229
225
  css: videoThumbnailStyles,
230
226
  href,
231
227
  onClick,
228
+ onContextMenu: (event) => event.preventDefault(),
232
229
  children: [
233
230
  /* @__PURE__ */ (0, __emotion_react_jsx_runtime.jsx)(components.Image, {
234
231
  css: thumbnailImageStyles,
@@ -244,10 +241,7 @@ const VideoThumbnail = ({ href, imageUrl, title, progress, topTags = [], bottomT
244
241
  }),
245
242
  /* @__PURE__ */ (0, __emotion_react_jsx_runtime.jsxs)("div", {
246
243
  css: tagBaseStyles,
247
- children: [/* @__PURE__ */ (0, __emotion_react_jsx_runtime.jsx)("div", {
248
- css: tagTopStyles,
249
- children: topTags?.map((tag) => /* @__PURE__ */ (0, __emotion_react_jsx_runtime.jsx)("div", { children: tag }, tag))
250
- }), bottomTags.length > 0 && /* @__PURE__ */ (0, __emotion_react_jsx_runtime.jsx)("div", {
244
+ children: [/* @__PURE__ */ (0, __emotion_react_jsx_runtime.jsx)("div", { children: topTags?.map((tag) => /* @__PURE__ */ (0, __emotion_react_jsx_runtime.jsx)("div", { children: tag }, tag)) }), bottomTags.length > 0 && /* @__PURE__ */ (0, __emotion_react_jsx_runtime.jsx)("div", {
251
245
  css: [tagBottomStyles, progress >= 0 && { marginBottom: "4px" }],
252
246
  children: bottomTags?.map((tag) => /* @__PURE__ */ (0, __emotion_react_jsx_runtime.jsx)("div", { children: tag }, tag))
253
247
  })]
@@ -286,7 +280,9 @@ const infoStyle = {
286
280
  justifyContent: "center",
287
281
  marginLeft: "1rem",
288
282
  height: "auto",
289
- flex: "1"
283
+ flex: "1",
284
+ "-webkit-touch-callout": "none",
285
+ "-webkit-user-select": "none"
290
286
  },
291
287
  "@media (min-width: 601px)": {
292
288
  "--description-line-clamp": 3,
@@ -301,7 +297,7 @@ const infoStyle = {
301
297
  minWidth: "0"
302
298
  }
303
299
  },
304
- "@media (max-width: 600px)": { "> div:first-of-type > a > div:last-of-type > div": { scale: .6 } }
300
+ "@media (max-width: 600px)": { "> div:first-of-type > a > div:last-of-type > div": { fontSize: "0.45rem" } }
305
301
  };
306
302
  const titleStyle = {
307
303
  display: "-webkit-box",
@@ -311,7 +307,7 @@ const titleStyle = {
311
307
  textOverflow: "ellipsis"
312
308
  };
313
309
  const descriptionStyle = {
314
- marginTop: "0.5rem",
310
+ paddingTop: "0.5rem",
315
311
  display: "var(--description-display, -webkit-box)",
316
312
  overflow: "hidden",
317
313
  WebkitBoxOrient: "vertical",
@@ -328,9 +324,17 @@ const descriptionStyle = {
328
324
  };
329
325
  const desktopDescriptionStyle = {
330
326
  display: "var(--desktop-description-display, -webkit-box)",
331
- margin: "0.75rem 0",
327
+ padding: "0.75rem 0",
332
328
  WebkitLineClamp: 3
333
329
  };
330
+ const OptionalLink = ({ slots, href, children, ...rest }) => href ? /* @__PURE__ */ (0, __emotion_react_jsx_runtime.jsx)(slots.Link, {
331
+ href,
332
+ ...rest,
333
+ children
334
+ }) : /* @__PURE__ */ (0, __emotion_react_jsx_runtime.jsx)("a", {
335
+ ...rest,
336
+ children
337
+ });
334
338
  const VideoItem = ({ style, href = "", thumbnailHref = href, imageUrl = "", data = {}, secondaryText, progress, topTags = [], bottomTags = [], slots = { Link: "a" }, onClickThumbnail, thumbnailChildren }) => /* @__PURE__ */ (0, __emotion_react_jsx_runtime.jsxs)("div", {
335
339
  css: [videoItemStyle, style],
336
340
  children: [/* @__PURE__ */ (0, __emotion_react_jsx_runtime.jsxs)("div", {
@@ -344,7 +348,8 @@ const VideoItem = ({ style, href = "", thumbnailHref = href, imageUrl = "", data
344
348
  slots,
345
349
  onClick: onClickThumbnail,
346
350
  children: thumbnailChildren
347
- }), /* @__PURE__ */ (0, __emotion_react_jsx_runtime.jsxs)(slots.Link, {
351
+ }), /* @__PURE__ */ (0, __emotion_react_jsx_runtime.jsxs)(OptionalLink, {
352
+ slots,
348
353
  href,
349
354
  children: [
350
355
  /* @__PURE__ */ (0, __emotion_react_jsx_runtime.jsx)("div", {
@@ -358,7 +363,9 @@ const VideoItem = ({ style, href = "", thumbnailHref = href, imageUrl = "", data
358
363
  secondaryText ? /* @__PURE__ */ (0, __emotion_react_jsx_runtime.jsx)("div", { children: secondaryText }) : null
359
364
  ]
360
365
  })]
361
- }), /* @__PURE__ */ (0, __emotion_react_jsx_runtime.jsx)("div", {
366
+ }), /* @__PURE__ */ (0, __emotion_react_jsx_runtime.jsx)(OptionalLink, {
367
+ slots,
368
+ href,
362
369
  css: descriptionStyle,
363
370
  children: data.synopsis
364
371
  })]
package/dist/index.mjs CHANGED
@@ -197,25 +197,21 @@ const tagBaseStyles = {
197
197
  gap: "0.4em",
198
198
  color: "var(--tag-color)",
199
199
  justifyContent: "var(--tag-justify-content, flex-start)",
200
- fontSize: "0.75rem",
200
+ fontSize: "0.625rem",
201
201
  wordBreak: "keep-all",
202
202
  "> div": {
203
- padding: "4px 6px",
203
+ padding: "0.4em 0.6em",
204
204
  borderRadius: "0.2em",
205
205
  fontWeight: 600,
206
206
  background: "var(--tag-background)",
207
- boxShadow: "0 2px 4px 0 rgba(0,0,0,0.25)",
208
- height: "18px",
209
- lineHeight: "18px"
207
+ boxShadow: "0 2px 4px 0 rgba(0,0,0,0.25)"
210
208
  }
211
209
  }
212
210
  };
213
- const tagTopStyles = { transformOrigin: "left top" };
214
211
  const tagBottomStyles = {
215
212
  "--tag-justify-content": "flex-end",
216
213
  "--tag-color": "#000",
217
- "--tag-background": "#fff",
218
- transformOrigin: "right bottom"
214
+ "--tag-background": "#fff"
219
215
  };
220
216
  const VideoThumbnail = ({ href, imageUrl, title, progress, topTags = [], bottomTags = [], children, slots = {}, onClick }) => {
221
217
  const components = {
@@ -229,6 +225,7 @@ const VideoThumbnail = ({ href, imageUrl, title, progress, topTags = [], bottomT
229
225
  css: videoThumbnailStyles,
230
226
  href,
231
227
  onClick,
228
+ onContextMenu: (event) => event.preventDefault(),
232
229
  children: [
233
230
  /* @__PURE__ */ jsx(components.Image, {
234
231
  css: thumbnailImageStyles,
@@ -244,10 +241,7 @@ const VideoThumbnail = ({ href, imageUrl, title, progress, topTags = [], bottomT
244
241
  }),
245
242
  /* @__PURE__ */ jsxs("div", {
246
243
  css: tagBaseStyles,
247
- children: [/* @__PURE__ */ jsx("div", {
248
- css: tagTopStyles,
249
- children: topTags?.map((tag) => /* @__PURE__ */ jsx("div", { children: tag }, tag))
250
- }), bottomTags.length > 0 && /* @__PURE__ */ jsx("div", {
244
+ children: [/* @__PURE__ */ jsx("div", { children: topTags?.map((tag) => /* @__PURE__ */ jsx("div", { children: tag }, tag)) }), bottomTags.length > 0 && /* @__PURE__ */ jsx("div", {
251
245
  css: [tagBottomStyles, progress >= 0 && { marginBottom: "4px" }],
252
246
  children: bottomTags?.map((tag) => /* @__PURE__ */ jsx("div", { children: tag }, tag))
253
247
  })]
@@ -286,7 +280,9 @@ const infoStyle = {
286
280
  justifyContent: "center",
287
281
  marginLeft: "1rem",
288
282
  height: "auto",
289
- flex: "1"
283
+ flex: "1",
284
+ "-webkit-touch-callout": "none",
285
+ "-webkit-user-select": "none"
290
286
  },
291
287
  "@media (min-width: 601px)": {
292
288
  "--description-line-clamp": 3,
@@ -301,7 +297,7 @@ const infoStyle = {
301
297
  minWidth: "0"
302
298
  }
303
299
  },
304
- "@media (max-width: 600px)": { "> div:first-of-type > a > div:last-of-type > div": { scale: .6 } }
300
+ "@media (max-width: 600px)": { "> div:first-of-type > a > div:last-of-type > div": { fontSize: "0.45rem" } }
305
301
  };
306
302
  const titleStyle = {
307
303
  display: "-webkit-box",
@@ -311,7 +307,7 @@ const titleStyle = {
311
307
  textOverflow: "ellipsis"
312
308
  };
313
309
  const descriptionStyle = {
314
- marginTop: "0.5rem",
310
+ paddingTop: "0.5rem",
315
311
  display: "var(--description-display, -webkit-box)",
316
312
  overflow: "hidden",
317
313
  WebkitBoxOrient: "vertical",
@@ -328,9 +324,17 @@ const descriptionStyle = {
328
324
  };
329
325
  const desktopDescriptionStyle = {
330
326
  display: "var(--desktop-description-display, -webkit-box)",
331
- margin: "0.75rem 0",
327
+ padding: "0.75rem 0",
332
328
  WebkitLineClamp: 3
333
329
  };
330
+ const OptionalLink = ({ slots, href, children, ...rest }) => href ? /* @__PURE__ */ jsx(slots.Link, {
331
+ href,
332
+ ...rest,
333
+ children
334
+ }) : /* @__PURE__ */ jsx("a", {
335
+ ...rest,
336
+ children
337
+ });
334
338
  const VideoItem = ({ style, href = "", thumbnailHref = href, imageUrl = "", data = {}, secondaryText, progress, topTags = [], bottomTags = [], slots = { Link: "a" }, onClickThumbnail, thumbnailChildren }) => /* @__PURE__ */ jsxs("div", {
335
339
  css: [videoItemStyle, style],
336
340
  children: [/* @__PURE__ */ jsxs("div", {
@@ -344,7 +348,8 @@ const VideoItem = ({ style, href = "", thumbnailHref = href, imageUrl = "", data
344
348
  slots,
345
349
  onClick: onClickThumbnail,
346
350
  children: thumbnailChildren
347
- }), /* @__PURE__ */ jsxs(slots.Link, {
351
+ }), /* @__PURE__ */ jsxs(OptionalLink, {
352
+ slots,
348
353
  href,
349
354
  children: [
350
355
  /* @__PURE__ */ jsx("div", {
@@ -358,7 +363,9 @@ const VideoItem = ({ style, href = "", thumbnailHref = href, imageUrl = "", data
358
363
  secondaryText ? /* @__PURE__ */ jsx("div", { children: secondaryText }) : null
359
364
  ]
360
365
  })]
361
- }), /* @__PURE__ */ jsx("div", {
366
+ }), /* @__PURE__ */ jsx(OptionalLink, {
367
+ slots,
368
+ href,
362
369
  css: descriptionStyle,
363
370
  children: data.synopsis
364
371
  })]
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@kkcompany/app-ui",
3
- "version": "0.1.10",
3
+ "version": "0.1.12",
4
4
  "module": "dist/index.mjs",
5
5
  "main": "dist/index.js",
6
6
  "types": "dist/index.d.mts",