@xhub-reels/sdk 0.1.20 → 0.1.22

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 +46 -101
  2. package/dist/index.js +46 -101
  3. package/package.json +1 -1
package/dist/index.cjs CHANGED
@@ -1624,43 +1624,6 @@ function DefaultSkeleton() {
1624
1624
  }
1625
1625
  }
1626
1626
  ),
1627
- /* @__PURE__ */ jsxRuntime.jsxs(
1628
- "div",
1629
- {
1630
- style: {
1631
- position: "absolute",
1632
- bottom: 100,
1633
- left: 16,
1634
- display: "flex",
1635
- flexDirection: "column",
1636
- gap: 8
1637
- },
1638
- children: [
1639
- /* @__PURE__ */ jsxRuntime.jsx("div", { style: skeletonBar(120, 14) }),
1640
- /* @__PURE__ */ jsxRuntime.jsx("div", { style: skeletonBar(200, 12) }),
1641
- /* @__PURE__ */ jsxRuntime.jsx("div", { style: skeletonBar(160, 12) })
1642
- ]
1643
- }
1644
- ),
1645
- /* @__PURE__ */ jsxRuntime.jsxs(
1646
- "div",
1647
- {
1648
- style: {
1649
- position: "absolute",
1650
- bottom: 100,
1651
- right: 16,
1652
- display: "flex",
1653
- flexDirection: "column",
1654
- gap: 20,
1655
- alignItems: "center"
1656
- },
1657
- children: [
1658
- /* @__PURE__ */ jsxRuntime.jsx("div", { style: skeletonCircle(40) }),
1659
- /* @__PURE__ */ jsxRuntime.jsx("div", { style: skeletonCircle(40) }),
1660
- /* @__PURE__ */ jsxRuntime.jsx("div", { style: skeletonCircle(40) })
1661
- ]
1662
- }
1663
- ),
1664
1627
  /* @__PURE__ */ jsxRuntime.jsx("style", { children: `
1665
1628
  @keyframes reels-sdk-shimmer {
1666
1629
  0% { transform: translateX(-100%); }
@@ -1671,22 +1634,6 @@ function DefaultSkeleton() {
1671
1634
  }
1672
1635
  );
1673
1636
  }
1674
- function skeletonBar(width, height) {
1675
- return {
1676
- width,
1677
- height,
1678
- borderRadius: height / 2,
1679
- background: "rgba(255,255,255,0.1)"
1680
- };
1681
- }
1682
- function skeletonCircle(size) {
1683
- return {
1684
- width: size,
1685
- height: size,
1686
- borderRadius: "50%",
1687
- background: "rgba(255,255,255,0.1)"
1688
- };
1689
- }
1690
1637
  function DefaultPauseAction() {
1691
1638
  return /* @__PURE__ */ jsxRuntime.jsx(
1692
1639
  "div",
@@ -2105,7 +2052,7 @@ function VideoSlotInner({
2105
2052
  inset: 0,
2106
2053
  backgroundImage: `url(${item.poster})`,
2107
2054
  backgroundSize: "cover",
2108
- backgroundPosition: "center",
2055
+ backgroundPosition: "center center",
2109
2056
  opacity: showPosterOverlay ? 1 : 0,
2110
2057
  transition: "opacity 0.15s ease",
2111
2058
  pointerEvents: "none"
@@ -2148,38 +2095,40 @@ function VideoSlotInner({
2148
2095
  children: renderPauseAction ? renderPauseAction(item, pauseActions) : /* @__PURE__ */ jsxRuntime.jsx(DefaultPauseAction, {})
2149
2096
  }
2150
2097
  ),
2151
- /* @__PURE__ */ jsxRuntime.jsx(
2152
- "div",
2153
- {
2154
- style: {
2155
- position: "absolute",
2156
- bottom: 80,
2157
- left: 16,
2158
- right: 80,
2159
- pointerEvents: "none",
2160
- color: "#fff"
2161
- },
2162
- children: renderOverlay ? renderOverlay(item, actions) : /* @__PURE__ */ jsxRuntime.jsx(DefaultOverlay, { item })
2163
- }
2164
- ),
2165
- /* @__PURE__ */ jsxRuntime.jsx(
2166
- "div",
2167
- {
2168
- style: {
2169
- position: "absolute",
2170
- bottom: 80,
2171
- right: 16,
2172
- display: "flex",
2173
- flexDirection: "column",
2174
- gap: 20,
2175
- alignItems: "center"
2176
- // Actions must be clickable; stop propagation so taps don't
2177
- // also trigger the video play/pause handler on the container.
2178
- },
2179
- onClick: (e) => e.stopPropagation(),
2180
- children: renderActions ? renderActions(item, actions) : /* @__PURE__ */ jsxRuntime.jsx(DefaultActions, { item, actions })
2181
- }
2182
- ),
2098
+ /* @__PURE__ */ jsxRuntime.jsx("div", { style: {
2099
+ position: "absolute",
2100
+ bottom: 0,
2101
+ left: 0,
2102
+ right: 0,
2103
+ top: 0,
2104
+ zIndex: 1e3
2105
+ }, children: /* @__PURE__ */ jsxRuntime.jsxs("div", { style: {
2106
+ position: "relative",
2107
+ width: "100%",
2108
+ height: "100%"
2109
+ }, children: [
2110
+ /* @__PURE__ */ jsxRuntime.jsx(
2111
+ "div",
2112
+ {
2113
+ style: {
2114
+ background: "linear-gradient(to bottom, transparent, rgba(0,0,0,0.5))",
2115
+ position: "absolute",
2116
+ width: "100%",
2117
+ height: "30%",
2118
+ bottom: 0,
2119
+ left: 0
2120
+ }
2121
+ }
2122
+ ),
2123
+ renderOverlay ? renderOverlay(item, actions) : /* @__PURE__ */ jsxRuntime.jsx(DefaultOverlay, { item }),
2124
+ /* @__PURE__ */ jsxRuntime.jsx(
2125
+ "div",
2126
+ {
2127
+ onClick: (e) => e.stopPropagation(),
2128
+ children: renderActions ? renderActions(item, actions) : /* @__PURE__ */ jsxRuntime.jsx(DefaultActions, { item, actions })
2129
+ }
2130
+ )
2131
+ ] }) }),
2183
2132
  showFps && /* @__PURE__ */ jsxRuntime.jsx(FpsCounter, {})
2184
2133
  ]
2185
2134
  }
@@ -2970,16 +2919,12 @@ function transformVideoItem(raw) {
2970
2919
  const stats = transformStats(obj);
2971
2920
  const interaction = transformInteraction(obj);
2972
2921
  let poster;
2973
- const thumbnailObj = obj["thumbnail"];
2974
- if (thumbnailObj && thumbnailObj["url"]) {
2975
- poster = toStr(thumbnailObj["url"], "") || void 0;
2976
- }
2977
- if (!poster) {
2978
- const mediaArr2 = obj["media"];
2979
- if (Array.isArray(mediaArr2) && mediaArr2.length > 0) {
2980
- const first = mediaArr2[0];
2981
- poster = toStr(first["poster"], "") || void 0;
2982
- }
2922
+ let duration = 0;
2923
+ const mediaArr = obj["media"];
2924
+ if (Array.isArray(mediaArr) && mediaArr.length > 0) {
2925
+ const first = mediaArr[0];
2926
+ poster = toStr(first["poster"], "") || void 0;
2927
+ duration = toNum(first["duration"], 0);
2983
2928
  }
2984
2929
  if (!poster) {
2985
2930
  poster = toStr(
@@ -2987,11 +2932,11 @@ function transformVideoItem(raw) {
2987
2932
  void 0
2988
2933
  ) || void 0;
2989
2934
  }
2990
- let duration = 0;
2991
- const mediaArr = obj["media"];
2992
- if (Array.isArray(mediaArr) && mediaArr.length > 0) {
2993
- const first = mediaArr[0];
2994
- duration = toNum(first["duration"], 0);
2935
+ if (!poster) {
2936
+ const thumbnailObj = obj["thumbnail"];
2937
+ if (thumbnailObj && thumbnailObj["url"]) {
2938
+ poster = toStr(thumbnailObj["url"], "") || void 0;
2939
+ }
2995
2940
  }
2996
2941
  if (duration === 0) {
2997
2942
  duration = toNum(tryFields(obj, "duration", "duration_seconds", "length", "video_duration"), 0);
package/dist/index.js CHANGED
@@ -1618,43 +1618,6 @@ function DefaultSkeleton() {
1618
1618
  }
1619
1619
  }
1620
1620
  ),
1621
- /* @__PURE__ */ jsxs(
1622
- "div",
1623
- {
1624
- style: {
1625
- position: "absolute",
1626
- bottom: 100,
1627
- left: 16,
1628
- display: "flex",
1629
- flexDirection: "column",
1630
- gap: 8
1631
- },
1632
- children: [
1633
- /* @__PURE__ */ jsx("div", { style: skeletonBar(120, 14) }),
1634
- /* @__PURE__ */ jsx("div", { style: skeletonBar(200, 12) }),
1635
- /* @__PURE__ */ jsx("div", { style: skeletonBar(160, 12) })
1636
- ]
1637
- }
1638
- ),
1639
- /* @__PURE__ */ jsxs(
1640
- "div",
1641
- {
1642
- style: {
1643
- position: "absolute",
1644
- bottom: 100,
1645
- right: 16,
1646
- display: "flex",
1647
- flexDirection: "column",
1648
- gap: 20,
1649
- alignItems: "center"
1650
- },
1651
- children: [
1652
- /* @__PURE__ */ jsx("div", { style: skeletonCircle(40) }),
1653
- /* @__PURE__ */ jsx("div", { style: skeletonCircle(40) }),
1654
- /* @__PURE__ */ jsx("div", { style: skeletonCircle(40) })
1655
- ]
1656
- }
1657
- ),
1658
1621
  /* @__PURE__ */ jsx("style", { children: `
1659
1622
  @keyframes reels-sdk-shimmer {
1660
1623
  0% { transform: translateX(-100%); }
@@ -1665,22 +1628,6 @@ function DefaultSkeleton() {
1665
1628
  }
1666
1629
  );
1667
1630
  }
1668
- function skeletonBar(width, height) {
1669
- return {
1670
- width,
1671
- height,
1672
- borderRadius: height / 2,
1673
- background: "rgba(255,255,255,0.1)"
1674
- };
1675
- }
1676
- function skeletonCircle(size) {
1677
- return {
1678
- width: size,
1679
- height: size,
1680
- borderRadius: "50%",
1681
- background: "rgba(255,255,255,0.1)"
1682
- };
1683
- }
1684
1631
  function DefaultPauseAction() {
1685
1632
  return /* @__PURE__ */ jsx(
1686
1633
  "div",
@@ -2099,7 +2046,7 @@ function VideoSlotInner({
2099
2046
  inset: 0,
2100
2047
  backgroundImage: `url(${item.poster})`,
2101
2048
  backgroundSize: "cover",
2102
- backgroundPosition: "center",
2049
+ backgroundPosition: "center center",
2103
2050
  opacity: showPosterOverlay ? 1 : 0,
2104
2051
  transition: "opacity 0.15s ease",
2105
2052
  pointerEvents: "none"
@@ -2142,38 +2089,40 @@ function VideoSlotInner({
2142
2089
  children: renderPauseAction ? renderPauseAction(item, pauseActions) : /* @__PURE__ */ jsx(DefaultPauseAction, {})
2143
2090
  }
2144
2091
  ),
2145
- /* @__PURE__ */ jsx(
2146
- "div",
2147
- {
2148
- style: {
2149
- position: "absolute",
2150
- bottom: 80,
2151
- left: 16,
2152
- right: 80,
2153
- pointerEvents: "none",
2154
- color: "#fff"
2155
- },
2156
- children: renderOverlay ? renderOverlay(item, actions) : /* @__PURE__ */ jsx(DefaultOverlay, { item })
2157
- }
2158
- ),
2159
- /* @__PURE__ */ jsx(
2160
- "div",
2161
- {
2162
- style: {
2163
- position: "absolute",
2164
- bottom: 80,
2165
- right: 16,
2166
- display: "flex",
2167
- flexDirection: "column",
2168
- gap: 20,
2169
- alignItems: "center"
2170
- // Actions must be clickable; stop propagation so taps don't
2171
- // also trigger the video play/pause handler on the container.
2172
- },
2173
- onClick: (e) => e.stopPropagation(),
2174
- children: renderActions ? renderActions(item, actions) : /* @__PURE__ */ jsx(DefaultActions, { item, actions })
2175
- }
2176
- ),
2092
+ /* @__PURE__ */ jsx("div", { style: {
2093
+ position: "absolute",
2094
+ bottom: 0,
2095
+ left: 0,
2096
+ right: 0,
2097
+ top: 0,
2098
+ zIndex: 1e3
2099
+ }, children: /* @__PURE__ */ jsxs("div", { style: {
2100
+ position: "relative",
2101
+ width: "100%",
2102
+ height: "100%"
2103
+ }, children: [
2104
+ /* @__PURE__ */ jsx(
2105
+ "div",
2106
+ {
2107
+ style: {
2108
+ background: "linear-gradient(to bottom, transparent, rgba(0,0,0,0.5))",
2109
+ position: "absolute",
2110
+ width: "100%",
2111
+ height: "30%",
2112
+ bottom: 0,
2113
+ left: 0
2114
+ }
2115
+ }
2116
+ ),
2117
+ renderOverlay ? renderOverlay(item, actions) : /* @__PURE__ */ jsx(DefaultOverlay, { item }),
2118
+ /* @__PURE__ */ jsx(
2119
+ "div",
2120
+ {
2121
+ onClick: (e) => e.stopPropagation(),
2122
+ children: renderActions ? renderActions(item, actions) : /* @__PURE__ */ jsx(DefaultActions, { item, actions })
2123
+ }
2124
+ )
2125
+ ] }) }),
2177
2126
  showFps && /* @__PURE__ */ jsx(FpsCounter, {})
2178
2127
  ]
2179
2128
  }
@@ -2964,16 +2913,12 @@ function transformVideoItem(raw) {
2964
2913
  const stats = transformStats(obj);
2965
2914
  const interaction = transformInteraction(obj);
2966
2915
  let poster;
2967
- const thumbnailObj = obj["thumbnail"];
2968
- if (thumbnailObj && thumbnailObj["url"]) {
2969
- poster = toStr(thumbnailObj["url"], "") || void 0;
2970
- }
2971
- if (!poster) {
2972
- const mediaArr2 = obj["media"];
2973
- if (Array.isArray(mediaArr2) && mediaArr2.length > 0) {
2974
- const first = mediaArr2[0];
2975
- poster = toStr(first["poster"], "") || void 0;
2976
- }
2916
+ let duration = 0;
2917
+ const mediaArr = obj["media"];
2918
+ if (Array.isArray(mediaArr) && mediaArr.length > 0) {
2919
+ const first = mediaArr[0];
2920
+ poster = toStr(first["poster"], "") || void 0;
2921
+ duration = toNum(first["duration"], 0);
2977
2922
  }
2978
2923
  if (!poster) {
2979
2924
  poster = toStr(
@@ -2981,11 +2926,11 @@ function transformVideoItem(raw) {
2981
2926
  void 0
2982
2927
  ) || void 0;
2983
2928
  }
2984
- let duration = 0;
2985
- const mediaArr = obj["media"];
2986
- if (Array.isArray(mediaArr) && mediaArr.length > 0) {
2987
- const first = mediaArr[0];
2988
- duration = toNum(first["duration"], 0);
2929
+ if (!poster) {
2930
+ const thumbnailObj = obj["thumbnail"];
2931
+ if (thumbnailObj && thumbnailObj["url"]) {
2932
+ poster = toStr(thumbnailObj["url"], "") || void 0;
2933
+ }
2989
2934
  }
2990
2935
  if (duration === 0) {
2991
2936
  duration = toNum(tryFields(obj, "duration", "duration_seconds", "length", "video_duration"), 0);
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@xhub-reels/sdk",
3
- "version": "0.1.20",
3
+ "version": "0.1.22",
4
4
  "description": "High-performance Short Video / Reels SDK for React — optimized for Flutter WebView",
5
5
  "license": "MIT",
6
6
  "type": "module",