@xhub-reels/sdk 0.1.20 → 0.1.21

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 +34 -85
  2. package/dist/index.js +34 -85
  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",
@@ -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
  }
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",
@@ -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
  }
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.21",
4
4
  "description": "High-performance Short Video / Reels SDK for React — optimized for Flutter WebView",
5
5
  "license": "MIT",
6
6
  "type": "module",