@rxdrag/website-lib-core 0.0.108 → 0.0.109

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/ReactVideoPlayer.tsx +82 -53
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@rxdrag/website-lib-core",
3
- "version": "0.0.108",
3
+ "version": "0.0.109",
4
4
  "type": "module",
5
5
  "exports": {
6
6
  ".": "./index.ts"
@@ -25,8 +25,8 @@
25
25
  "eslint": "^7.32.0",
26
26
  "typescript": "^5",
27
27
  "@rxdrag/eslint-config-custom": "0.2.12",
28
- "@rxdrag/slate-preview": "1.2.63",
29
- "@rxdrag/tsconfig": "0.2.0"
28
+ "@rxdrag/tsconfig": "0.2.0",
29
+ "@rxdrag/slate-preview": "1.2.63"
30
30
  },
31
31
  "dependencies": {
32
32
  "@iconify/utils": "^3.0.2",
@@ -34,8 +34,8 @@
34
34
  "gsap": "^3.12.7",
35
35
  "hls.js": "^1.6.13",
36
36
  "lodash-es": "^4.17.21",
37
- "@rxdrag/entify-lib": "0.0.23",
38
- "@rxdrag/rxcms-models": "0.3.96"
37
+ "@rxdrag/rxcms-models": "0.3.96",
38
+ "@rxdrag/entify-lib": "0.0.23"
39
39
  },
40
40
  "peerDependencies": {
41
41
  "astro": "^4.0.0 || ^5.0.0",
package/src/react/components/ReactVideoPlayer.tsx CHANGED
@@ -31,6 +31,7 @@ export const ReactVideoPlayer = forwardRef<
31
31
  endTitle?: string;
32
32
  media: Media;
33
33
  posterUrl?: string;
34
+ eagerLoad?: boolean;
34
35
  classNames?: VideoPlayerClassNames;
35
36
  callToAction?: string;
36
37
  onToggleSelect?: (id: ID) => void;
@@ -42,6 +43,7 @@ export const ReactVideoPlayer = forwardRef<
42
43
  media,
43
44
  onToggleSelect,
44
45
  posterUrl,
46
+ eagerLoad,
45
47
  classNames,
46
48
  callToAction,
47
49
  designMode,
@@ -51,6 +53,51 @@ export const ReactVideoPlayer = forwardRef<
51
53
  const hlsRef = useRef<Hls | null>(null);
52
54
  const [isPlaying, setIsPlaying] = useState(false);
53
55
  const [isEnded, setIsEnded] = useState(false);
56
+ const [isSourceReady, setIsSourceReady] = useState(false);
57
+
58
+ const ensureSourceReady = useCallback(() => {
59
+ const video = videoRef.current;
60
+ const url = media.file?.original;
61
+ if (!video || !url) return false;
62
+ if (isSourceReady) return true;
63
+
64
+ if (media.storageType === "cloudflare_stream") {
65
+ if (!Hls.isSupported()) {
66
+ if (video.canPlayType("application/vnd.apple.mpegurl")) {
67
+ video.src = url;
68
+ setIsSourceReady(true);
69
+ return true;
70
+ }
71
+ return false;
72
+ }
73
+
74
+ const hls = new Hls({ enableWorker: true });
75
+ hls.on(Hls.Events.ERROR, (_event, data) => {
76
+ if (data.fatal) {
77
+ switch (data.type) {
78
+ case Hls.ErrorTypes.NETWORK_ERROR:
79
+ hls.startLoad();
80
+ break;
81
+ case Hls.ErrorTypes.MEDIA_ERROR:
82
+ hls.recoverMediaError();
83
+ break;
84
+ default:
85
+ hls.destroy();
86
+ break;
87
+ }
88
+ }
89
+ });
90
+ hls.loadSource(url);
91
+ hls.attachMedia(video);
92
+ hlsRef.current = hls;
93
+ setIsSourceReady(true);
94
+ return true;
95
+ }
96
+
97
+ video.src = url;
98
+ setIsSourceReady(true);
99
+ return true;
100
+ }, [isSourceReady, media.file?.original, media.storageType]);
54
101
 
55
102
  const handleContainerClick = useCallback(
56
103
  (e: React.MouseEvent) => {
@@ -73,16 +120,30 @@ export const ReactVideoPlayer = forwardRef<
73
120
  e.stopPropagation();
74
121
  const v = videoRef.current;
75
122
  if (!v) return;
76
- if (isPlaying) v.pause();
77
- else v.play();
123
+ if (isPlaying) {
124
+ v.pause();
125
+ return;
126
+ }
127
+
128
+ const ok = ensureSourceReady();
129
+ if (!ok) return;
130
+
131
+ v.play();
78
132
  },
79
- [isPlaying, designMode]
133
+ [isPlaying, designMode, ensureSourceReady]
80
134
  );
81
135
 
82
136
  useEffect(() => {
83
137
  const video = videoRef.current;
84
- const url = media.file?.original;
85
- if (!video || !url) return;
138
+ if (!video) return;
139
+
140
+ if (hlsRef.current) {
141
+ hlsRef.current.destroy();
142
+ hlsRef.current = null;
143
+ }
144
+ video.removeAttribute("src");
145
+ video.load();
146
+ setIsSourceReady(false);
86
147
 
87
148
  const onPlay = () => {
88
149
  setIsPlaying(true);
@@ -98,55 +159,21 @@ export const ReactVideoPlayer = forwardRef<
98
159
  video.addEventListener("pause", onPause);
99
160
  video.addEventListener("ended", onEnded);
100
161
 
101
- if (media.storageType === "cloudflare_stream") {
102
- if (!Hls.isSupported()) {
103
- if (video.canPlayType("application/vnd.apple.mpegurl")) {
104
- video.src = url;
105
- }
106
- return () => {
107
- video.removeEventListener("play", onPlay);
108
- video.removeEventListener("pause", onPause);
109
- video.removeEventListener("ended", onEnded);
110
- };
111
- }
112
-
113
- const hls = new Hls({ enableWorker: true });
114
- hls.on(Hls.Events.ERROR, (_event, data) => {
115
- if (data.fatal) {
116
- switch (data.type) {
117
- case Hls.ErrorTypes.NETWORK_ERROR:
118
- hls.startLoad();
119
- break;
120
- case Hls.ErrorTypes.MEDIA_ERROR:
121
- hls.recoverMediaError();
122
- break;
123
- default:
124
- hls.destroy();
125
- break;
126
- }
127
- }
128
- });
162
+ if (eagerLoad) {
163
+ ensureSourceReady();
164
+ }
129
165
 
130
- hls.loadSource(url);
131
- hls.attachMedia(video);
132
- hlsRef.current = hls;
166
+ return () => {
167
+ video.removeEventListener("play", onPlay);
168
+ video.removeEventListener("pause", onPause);
169
+ video.removeEventListener("ended", onEnded);
133
170
 
134
- return () => {
135
- video.removeEventListener("play", onPlay);
136
- video.removeEventListener("pause", onPause);
137
- video.removeEventListener("ended", onEnded);
138
- hls.destroy();
171
+ if (hlsRef.current) {
172
+ hlsRef.current.destroy();
139
173
  hlsRef.current = null;
140
- };
141
- } else {
142
- video.src = url;
143
- return () => {
144
- video.removeEventListener("play", onPlay);
145
- video.removeEventListener("pause", onPause);
146
- video.removeEventListener("ended", onEnded);
147
- };
148
- }
149
- }, [media.file?.original, media.storageType]);
174
+ }
175
+ };
176
+ }, [eagerLoad, ensureSourceReady, media.file?.original, media.storageType]);
150
177
 
151
178
  return (
152
179
  <div
@@ -161,7 +188,7 @@ export const ReactVideoPlayer = forwardRef<
161
188
  <video
162
189
  ref={videoRef}
163
190
  onClick={(e) => !designMode && e.stopPropagation()}
164
- preload="metadata"
191
+ preload={eagerLoad ? "metadata" : "none"}
165
192
  poster={posterUrl ?? media.file?.thumbnail}
166
193
  className={clsx(
167
194
  "w-full h-full rounded-lg object-cover",
@@ -169,7 +196,7 @@ export const ReactVideoPlayer = forwardRef<
169
196
  )}
170
197
  controls={!designMode}
171
198
  >
172
- {!media.storageType && media.file?.original ? (
199
+ {!media.storageType && media.file?.original && (eagerLoad || isSourceReady) ? (
173
200
  <source src={media.file.original} />
174
201
  ) : null}
175
202
  Your browser does not support video playback.
@@ -248,6 +275,8 @@ export const ReactVideoPlayer = forwardRef<
248
275
  e.stopPropagation();
249
276
  const v = videoRef.current;
250
277
  if (!v) return;
278
+ const ok = ensureSourceReady();
279
+ if (!ok) return;
251
280
  v.currentTime = 0;
252
281
  setIsEnded(false);
253
282
  v.play();