@xhub-reels/sdk 0.1.12 → 0.1.13

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 +27 -4
  2. package/dist/index.js +27 -4
  3. package/package.json +1 -1
package/dist/index.cjs CHANGED
@@ -1428,6 +1428,9 @@ function useHls(options) {
1428
1428
  video.addEventListener("canplay", handleCanPlayReuse, { once: true });
1429
1429
  video.addEventListener("loadeddata", handleCanPlayReuse, { once: true });
1430
1430
  video.addEventListener("playing", handleCanPlayReuse, { once: true });
1431
+ if (isActive && video.readyState < HTMLMediaElement.HAVE_FUTURE_DATA) {
1432
+ video.load();
1433
+ }
1431
1434
  return () => {
1432
1435
  video.removeEventListener("canplay", handleCanPlayReuse);
1433
1436
  video.removeEventListener("loadeddata", handleCanPlayReuse);
@@ -1830,6 +1833,7 @@ function VideoSlotInner({
1830
1833
  const video = videoRef.current;
1831
1834
  if (!video) return;
1832
1835
  let onReady = null;
1836
+ let fallbackTimerId = null;
1833
1837
  if (isActive) {
1834
1838
  wasActiveRef.current = true;
1835
1839
  const startPlay = () => {
@@ -1839,6 +1843,10 @@ function VideoSlotInner({
1839
1843
  video.removeEventListener("playing", onReady);
1840
1844
  onReady = null;
1841
1845
  }
1846
+ if (fallbackTimerId !== null) {
1847
+ clearTimeout(fallbackTimerId);
1848
+ fallbackTimerId = null;
1849
+ }
1842
1850
  video.muted = true;
1843
1851
  video.play().then(() => {
1844
1852
  video.muted = isMuted;
@@ -1853,9 +1861,15 @@ function VideoSlotInner({
1853
1861
  video.addEventListener("canplay", onReady, { once: true });
1854
1862
  video.addEventListener("loadeddata", onReady, { once: true });
1855
1863
  video.addEventListener("playing", onReady, { once: true });
1856
- if (video.readyState === HTMLMediaElement.HAVE_NOTHING && isNativeHls && video.src) {
1864
+ if (isNativeHls && video.src && video.readyState < HTMLMediaElement.HAVE_FUTURE_DATA) {
1857
1865
  video.load();
1858
1866
  }
1867
+ fallbackTimerId = window.setTimeout(() => {
1868
+ fallbackTimerId = null;
1869
+ if (onReady) {
1870
+ startPlay();
1871
+ }
1872
+ }, 3e3);
1859
1873
  }
1860
1874
  } else if (wasActiveRef.current) {
1861
1875
  video.pause();
@@ -1871,13 +1885,21 @@ function VideoSlotInner({
1871
1885
  video.removeEventListener("loadeddata", onReady);
1872
1886
  video.removeEventListener("playing", onReady);
1873
1887
  }
1888
+ if (fallbackTimerId !== null) {
1889
+ clearTimeout(fallbackTimerId);
1890
+ fallbackTimerId = null;
1891
+ }
1874
1892
  };
1875
1893
  }, [isActive, isMuted, hasPlayedAhead, isNativeHls]);
1876
1894
  react.useEffect(() => {
1877
1895
  const video = videoRef.current;
1878
1896
  if (!video) return;
1879
- video.muted = isMuted;
1880
- }, [isMuted]);
1897
+ if (isActive) {
1898
+ video.muted = isMuted;
1899
+ } else {
1900
+ video.muted = true;
1901
+ }
1902
+ }, [isMuted, isActive]);
1881
1903
  const [isActuallyPlaying, setIsActuallyPlaying] = react.useState(false);
1882
1904
  react.useEffect(() => {
1883
1905
  const video = videoRef.current;
@@ -1955,8 +1977,9 @@ function VideoSlotInner({
1955
1977
  ref: videoRef,
1956
1978
  src: mp4Src,
1957
1979
  loop: true,
1958
- muted: isMuted,
1980
+ muted: true,
1959
1981
  playsInline: true,
1982
+ autoPlay: isActive,
1960
1983
  preload: shouldLoadSrc ? "auto" : "none",
1961
1984
  style: {
1962
1985
  width: "100%",
package/dist/index.js CHANGED
@@ -1422,6 +1422,9 @@ function useHls(options) {
1422
1422
  video.addEventListener("canplay", handleCanPlayReuse, { once: true });
1423
1423
  video.addEventListener("loadeddata", handleCanPlayReuse, { once: true });
1424
1424
  video.addEventListener("playing", handleCanPlayReuse, { once: true });
1425
+ if (isActive && video.readyState < HTMLMediaElement.HAVE_FUTURE_DATA) {
1426
+ video.load();
1427
+ }
1425
1428
  return () => {
1426
1429
  video.removeEventListener("canplay", handleCanPlayReuse);
1427
1430
  video.removeEventListener("loadeddata", handleCanPlayReuse);
@@ -1824,6 +1827,7 @@ function VideoSlotInner({
1824
1827
  const video = videoRef.current;
1825
1828
  if (!video) return;
1826
1829
  let onReady = null;
1830
+ let fallbackTimerId = null;
1827
1831
  if (isActive) {
1828
1832
  wasActiveRef.current = true;
1829
1833
  const startPlay = () => {
@@ -1833,6 +1837,10 @@ function VideoSlotInner({
1833
1837
  video.removeEventListener("playing", onReady);
1834
1838
  onReady = null;
1835
1839
  }
1840
+ if (fallbackTimerId !== null) {
1841
+ clearTimeout(fallbackTimerId);
1842
+ fallbackTimerId = null;
1843
+ }
1836
1844
  video.muted = true;
1837
1845
  video.play().then(() => {
1838
1846
  video.muted = isMuted;
@@ -1847,9 +1855,15 @@ function VideoSlotInner({
1847
1855
  video.addEventListener("canplay", onReady, { once: true });
1848
1856
  video.addEventListener("loadeddata", onReady, { once: true });
1849
1857
  video.addEventListener("playing", onReady, { once: true });
1850
- if (video.readyState === HTMLMediaElement.HAVE_NOTHING && isNativeHls && video.src) {
1858
+ if (isNativeHls && video.src && video.readyState < HTMLMediaElement.HAVE_FUTURE_DATA) {
1851
1859
  video.load();
1852
1860
  }
1861
+ fallbackTimerId = window.setTimeout(() => {
1862
+ fallbackTimerId = null;
1863
+ if (onReady) {
1864
+ startPlay();
1865
+ }
1866
+ }, 3e3);
1853
1867
  }
1854
1868
  } else if (wasActiveRef.current) {
1855
1869
  video.pause();
@@ -1865,13 +1879,21 @@ function VideoSlotInner({
1865
1879
  video.removeEventListener("loadeddata", onReady);
1866
1880
  video.removeEventListener("playing", onReady);
1867
1881
  }
1882
+ if (fallbackTimerId !== null) {
1883
+ clearTimeout(fallbackTimerId);
1884
+ fallbackTimerId = null;
1885
+ }
1868
1886
  };
1869
1887
  }, [isActive, isMuted, hasPlayedAhead, isNativeHls]);
1870
1888
  useEffect(() => {
1871
1889
  const video = videoRef.current;
1872
1890
  if (!video) return;
1873
- video.muted = isMuted;
1874
- }, [isMuted]);
1891
+ if (isActive) {
1892
+ video.muted = isMuted;
1893
+ } else {
1894
+ video.muted = true;
1895
+ }
1896
+ }, [isMuted, isActive]);
1875
1897
  const [isActuallyPlaying, setIsActuallyPlaying] = useState(false);
1876
1898
  useEffect(() => {
1877
1899
  const video = videoRef.current;
@@ -1949,8 +1971,9 @@ function VideoSlotInner({
1949
1971
  ref: videoRef,
1950
1972
  src: mp4Src,
1951
1973
  loop: true,
1952
- muted: isMuted,
1974
+ muted: true,
1953
1975
  playsInline: true,
1976
+ autoPlay: isActive,
1954
1977
  preload: shouldLoadSrc ? "auto" : "none",
1955
1978
  style: {
1956
1979
  width: "100%",
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@xhub-reels/sdk",
3
- "version": "0.1.12",
3
+ "version": "0.1.13",
4
4
  "description": "High-performance Short Video / Reels SDK for React — optimized for Flutter WebView",
5
5
  "license": "MIT",
6
6
  "type": "module",