@shopify/shop-minis-react 0.4.2 → 0.4.3
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.
|
@@ -1,25 +1,27 @@
|
|
|
1
|
-
import { jsx as t, jsxs as
|
|
2
|
-
import { forwardRef as
|
|
3
|
-
import
|
|
1
|
+
import { jsx as t, jsxs as D } from "react/jsx-runtime";
|
|
2
|
+
import { forwardRef as I, useRef as b, useState as B, useImperativeHandle as M, useMemo as R, useEffect as a, useCallback as z } from "react";
|
|
3
|
+
import F from "../../shop-minis-react/node_modules/.pnpm/video.js@8.23.3/node_modules/video.js/dist/video.es.js";
|
|
4
4
|
/* empty css */
|
|
5
|
-
const
|
|
5
|
+
const q = I(
|
|
6
6
|
({
|
|
7
7
|
src: f,
|
|
8
8
|
format: d = "video/mp4",
|
|
9
9
|
poster: p,
|
|
10
|
-
muted:
|
|
10
|
+
muted: s,
|
|
11
11
|
autoplay: m,
|
|
12
|
-
|
|
13
|
-
|
|
14
|
-
|
|
15
|
-
|
|
16
|
-
|
|
17
|
-
|
|
12
|
+
preload: v = "auto",
|
|
13
|
+
loop: y = "false",
|
|
14
|
+
width: l,
|
|
15
|
+
height: h,
|
|
16
|
+
playButtonComponent: w,
|
|
17
|
+
onPlay: j,
|
|
18
|
+
onPause: x,
|
|
19
|
+
onEnded: P,
|
|
18
20
|
onReady: c
|
|
19
|
-
},
|
|
20
|
-
const i =
|
|
21
|
-
|
|
22
|
-
|
|
21
|
+
}, E) => {
|
|
22
|
+
const i = b(null), e = b(null), [o, n] = B(!1);
|
|
23
|
+
M(
|
|
24
|
+
E,
|
|
23
25
|
() => ({
|
|
24
26
|
play: async () => {
|
|
25
27
|
if (e.current)
|
|
@@ -35,7 +37,7 @@ const W = k(
|
|
|
35
37
|
}),
|
|
36
38
|
[]
|
|
37
39
|
);
|
|
38
|
-
const
|
|
40
|
+
const g = R(
|
|
39
41
|
() => ({
|
|
40
42
|
controls: !1,
|
|
41
43
|
controlBar: {
|
|
@@ -43,14 +45,15 @@ const W = k(
|
|
|
43
45
|
inline: !1
|
|
44
46
|
}
|
|
45
47
|
},
|
|
46
|
-
preload:
|
|
47
|
-
|
|
48
|
+
preload: v,
|
|
49
|
+
loop: y,
|
|
50
|
+
muted: s,
|
|
48
51
|
// This makes sure that the video player does not take over the whole screen
|
|
49
52
|
preferFullWindow: !1,
|
|
50
53
|
playsinline: !0,
|
|
51
54
|
poster: p,
|
|
52
|
-
height:
|
|
53
|
-
width:
|
|
55
|
+
height: h,
|
|
56
|
+
width: l,
|
|
54
57
|
sources: [
|
|
55
58
|
{
|
|
56
59
|
src: f,
|
|
@@ -58,7 +61,7 @@ const W = k(
|
|
|
58
61
|
}
|
|
59
62
|
]
|
|
60
63
|
}),
|
|
61
|
-
[
|
|
64
|
+
[s, p, h, l, f, d, v, y]
|
|
62
65
|
);
|
|
63
66
|
a(() => {
|
|
64
67
|
const r = e.current;
|
|
@@ -68,34 +71,34 @@ const W = k(
|
|
|
68
71
|
}, [e]), a(() => {
|
|
69
72
|
if (!e.current) return;
|
|
70
73
|
const r = () => {
|
|
71
|
-
|
|
72
|
-
},
|
|
73
|
-
|
|
74
|
-
},
|
|
75
|
-
|
|
74
|
+
j?.(), n(!0);
|
|
75
|
+
}, C = () => {
|
|
76
|
+
x?.(), n(!1);
|
|
77
|
+
}, N = () => {
|
|
78
|
+
P?.(), n(!1);
|
|
76
79
|
};
|
|
77
|
-
return e.current.on("play", r), e.current.on("pause",
|
|
78
|
-
e.current && (e.current.off("play", r), e.current.off("pause",
|
|
80
|
+
return e.current.on("play", r), e.current.on("pause", C), e.current.on("ended", N), () => {
|
|
81
|
+
e.current && (e.current.off("play", r), e.current.off("pause", C), e.current.off("ended", N));
|
|
79
82
|
};
|
|
80
|
-
}, [
|
|
81
|
-
const u =
|
|
83
|
+
}, [P, x, j]);
|
|
84
|
+
const u = z(() => {
|
|
82
85
|
o ? (e.current?.pause(), n(!1)) : (e.current?.play(), n(!0));
|
|
83
86
|
}, [o]);
|
|
84
87
|
a(() => {
|
|
85
88
|
if (!e.current) {
|
|
86
89
|
const r = document.createElement("video-js");
|
|
87
|
-
i.current?.appendChild(r), e.current =
|
|
90
|
+
i.current?.appendChild(r), e.current = F(r, g, () => {
|
|
88
91
|
c && c(), m && u();
|
|
89
92
|
});
|
|
90
93
|
}
|
|
91
|
-
}, [
|
|
92
|
-
e.current && !e.current.isDisposed() && e.current.muted(
|
|
93
|
-
}, [
|
|
94
|
-
const
|
|
95
|
-
|
|
94
|
+
}, [g, i, m, c, u]), a(() => {
|
|
95
|
+
e.current && !e.current.isDisposed() && e.current.muted(s ?? !1);
|
|
96
|
+
}, [s]);
|
|
97
|
+
const k = [
|
|
98
|
+
l ? `w-${l}` : void 0,
|
|
96
99
|
"relative"
|
|
97
100
|
].join(" ");
|
|
98
|
-
return /* @__PURE__ */ t("div", { className: "flex", children: /* @__PURE__ */
|
|
101
|
+
return /* @__PURE__ */ t("div", { className: "flex", children: /* @__PURE__ */ D("div", { "data-vjs-player": !0, className: k, children: [
|
|
99
102
|
/* @__PURE__ */ t("div", { ref: i }),
|
|
100
103
|
/* @__PURE__ */ t(
|
|
101
104
|
"div",
|
|
@@ -103,12 +106,12 @@ const W = k(
|
|
|
103
106
|
className: "absolute top-0 left-0 w-full h-full flex items-center justify-center cursor-pointer",
|
|
104
107
|
onClick: u,
|
|
105
108
|
"aria-hidden": !0,
|
|
106
|
-
children: o ? null :
|
|
109
|
+
children: o ? null : w ?? /* @__PURE__ */ t(H, {})
|
|
107
110
|
}
|
|
108
111
|
)
|
|
109
112
|
] }) });
|
|
110
113
|
}
|
|
111
|
-
),
|
|
114
|
+
), H = () => /* @__PURE__ */ t("div", { className: "absolute inset-0 flex items-center justify-center bg-black/20 cursor-pointer animate-in fade-in duration-200", children: /* @__PURE__ */ t(
|
|
112
115
|
"svg",
|
|
113
116
|
{
|
|
114
117
|
viewBox: "0 0 24 24",
|
|
@@ -118,6 +121,6 @@ const W = k(
|
|
|
118
121
|
}
|
|
119
122
|
) });
|
|
120
123
|
export {
|
|
121
|
-
|
|
124
|
+
q as VideoPlayer
|
|
122
125
|
};
|
|
123
126
|
//# sourceMappingURL=video-player.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"video-player.js","sources":["../../../src/components/atoms/video-player.tsx"],"sourcesContent":["import {\n useRef,\n useEffect,\n useState,\n useCallback,\n forwardRef,\n useImperativeHandle,\n useMemo,\n} from 'react'\n\nimport videojs from 'video.js'\nimport Player from 'video.js/dist/types/player'\nimport 'video.js/dist/video-js.css'\n\nexport interface VideoPlayerRef {\n play: () => Promise<void>\n pause: () => void\n}\n\ninterface VideoPlayerProps {\n src: string\n /**\n * The format/MIME type of the video.\n * @default 'video/mp4'\n */\n format?: string\n muted?: boolean\n poster?: string\n autoplay?: boolean\n width?: number\n height?: number\n playButtonComponent?: React.ReactNode\n onPlay?: () => void\n onPause?: () => void\n onEnded?: () => void\n onReady?: () => void\n}\n\nexport const VideoPlayer: React.ForwardRefExoticComponent<\n VideoPlayerProps & React.RefAttributes<VideoPlayerRef>\n> = forwardRef<VideoPlayerRef, VideoPlayerProps>(\n (\n {\n src,\n format = 'video/mp4',\n poster,\n muted,\n autoplay,\n width,\n height,\n playButtonComponent,\n onPlay,\n onPause,\n onEnded,\n onReady,\n },\n ref\n ) => {\n const videoContainerRef = useRef<HTMLDivElement>(null)\n const playerRef = useRef<Player | null>(null)\n\n const [isPlaying, setIsPlaying] = useState(false)\n\n // Expose imperative methods to parent components\n useImperativeHandle(\n ref,\n () => ({\n play: async () => {\n if (playerRef.current) {\n try {\n await playerRef.current.play()\n setIsPlaying(true)\n } catch (error) {\n console.error('Error playing video:', error)\n }\n }\n },\n pause: () => {\n if (playerRef.current) {\n playerRef.current.pause()\n setIsPlaying(false)\n }\n },\n }),\n []\n )\n\n const options = useMemo(\n () => ({\n controls: false,\n controlBar: {\n volumePanel: {\n inline: false,\n },\n },\n preload
|
|
1
|
+
{"version":3,"file":"video-player.js","sources":["../../../src/components/atoms/video-player.tsx"],"sourcesContent":["import {\n useRef,\n useEffect,\n useState,\n useCallback,\n forwardRef,\n useImperativeHandle,\n useMemo,\n} from 'react'\n\nimport videojs from 'video.js'\nimport Player from 'video.js/dist/types/player'\nimport 'video.js/dist/video-js.css'\n\nexport interface VideoPlayerRef {\n play: () => Promise<void>\n pause: () => void\n}\n\ninterface VideoPlayerProps {\n src: string\n /**\n * The format/MIME type of the video.\n * @default 'video/mp4'\n */\n format?: string\n muted?: boolean\n poster?: string\n autoplay?: boolean\n preload?: 'none' | 'metadata' | 'auto'\n loop?: boolean\n width?: number\n height?: number\n playButtonComponent?: React.ReactNode\n onPlay?: () => void\n onPause?: () => void\n onEnded?: () => void\n onReady?: () => void\n}\n\nexport const VideoPlayer: React.ForwardRefExoticComponent<\n VideoPlayerProps & React.RefAttributes<VideoPlayerRef>\n> = forwardRef<VideoPlayerRef, VideoPlayerProps>(\n (\n {\n src,\n format = 'video/mp4',\n poster,\n muted,\n autoplay,\n preload = 'auto',\n loop = 'false',\n width,\n height,\n playButtonComponent,\n onPlay,\n onPause,\n onEnded,\n onReady,\n },\n ref\n ) => {\n const videoContainerRef = useRef<HTMLDivElement>(null)\n const playerRef = useRef<Player | null>(null)\n\n const [isPlaying, setIsPlaying] = useState(false)\n\n // Expose imperative methods to parent components\n useImperativeHandle(\n ref,\n () => ({\n play: async () => {\n if (playerRef.current) {\n try {\n await playerRef.current.play()\n setIsPlaying(true)\n } catch (error) {\n console.error('Error playing video:', error)\n }\n }\n },\n pause: () => {\n if (playerRef.current) {\n playerRef.current.pause()\n setIsPlaying(false)\n }\n },\n }),\n []\n )\n\n const options = useMemo(\n () => ({\n controls: false,\n controlBar: {\n volumePanel: {\n inline: false,\n },\n },\n preload,\n loop,\n muted,\n // This makes sure that the video player does not take over the whole screen\n preferFullWindow: false,\n playsinline: true,\n poster,\n height,\n width,\n sources: [\n {\n src,\n type: format,\n },\n ],\n }),\n [muted, poster, height, width, src, format, preload, loop]\n )\n\n useEffect(() => {\n const player = playerRef.current\n\n return () => {\n if (player && !player.isDisposed()) {\n player.dispose()\n playerRef.current = null\n }\n }\n }, [playerRef])\n\n useEffect(() => {\n if (!playerRef.current) return\n\n const handlePlay = () => {\n onPlay?.()\n setIsPlaying(true)\n }\n const handlePause = () => {\n onPause?.()\n setIsPlaying(false)\n }\n const handleEnded = () => {\n onEnded?.()\n setIsPlaying(false)\n }\n\n playerRef.current.on('play', handlePlay)\n playerRef.current.on('pause', handlePause)\n playerRef.current.on('ended', handleEnded)\n\n return () => {\n if (playerRef.current) {\n playerRef.current.off('play', handlePlay)\n playerRef.current.off('pause', handlePause)\n playerRef.current.off('ended', handleEnded)\n }\n }\n }, [onEnded, onPause, onPlay])\n\n const togglePlayPause = useCallback(() => {\n if (isPlaying) {\n playerRef.current?.pause()\n setIsPlaying(false)\n } else {\n playerRef.current?.play()\n setIsPlaying(true)\n }\n }, [isPlaying])\n\n useEffect(() => {\n if (!playerRef.current) {\n const videoElement = document.createElement('video-js')\n\n // The Video.js player needs to be _inside_ the component element for React 18 Strict Mode.\n videoContainerRef.current?.appendChild(videoElement)\n\n playerRef.current = videojs(videoElement, options, () => {\n onReady && onReady()\n\n if (autoplay) {\n togglePlayPause()\n }\n })\n }\n }, [options, videoContainerRef, autoplay, onReady, togglePlayPause])\n\n // Update muted state when prop changes after initial render\n useEffect(() => {\n if (playerRef.current && !playerRef.current.isDisposed()) {\n playerRef.current.muted(muted ?? false)\n }\n }, [muted])\n\n const containerClassName = [\n width ? `w-${width}` : undefined,\n 'relative',\n ].join(' ')\n\n return (\n <div className=\"flex\">\n <div data-vjs-player className={containerClassName}>\n <div ref={videoContainerRef} />\n <div\n className=\"absolute top-0 left-0 w-full h-full flex items-center justify-center cursor-pointer\"\n onClick={togglePlayPause}\n aria-hidden\n >\n {isPlaying ? null : (playButtonComponent ?? <DefaultPlayIcon />)}\n </div>\n </div>\n </div>\n )\n }\n)\n\nconst DefaultPlayIcon = () => (\n <div className=\"absolute inset-0 flex items-center justify-center bg-black/20 cursor-pointer animate-in fade-in duration-200\">\n <svg\n viewBox=\"0 0 24 24\"\n className=\"w-10 h-10 text-white\"\n fill=\"currentColor\"\n >\n <path d=\"M8 5v14l11-7z\" />\n </svg>\n </div>\n)\n"],"names":["VideoPlayer","forwardRef","src","format","poster","muted","autoplay","preload","loop","width","height","playButtonComponent","onPlay","onPause","onEnded","onReady","ref","videoContainerRef","useRef","playerRef","isPlaying","setIsPlaying","useState","useImperativeHandle","error","options","useMemo","useEffect","player","handlePlay","handlePause","handleEnded","togglePlayPause","useCallback","videoElement","videojs","containerClassName","jsx","DefaultPlayIcon"],"mappings":"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"}
|
package/package.json
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@shopify/shop-minis-react",
|
|
3
3
|
"license": "SEE LICENSE IN LICENSE.txt",
|
|
4
|
-
"version": "0.4.
|
|
4
|
+
"version": "0.4.3",
|
|
5
5
|
"sideEffects": false,
|
|
6
6
|
"type": "module",
|
|
7
7
|
"engines": {
|
|
@@ -50,7 +50,6 @@
|
|
|
50
50
|
"@types/lodash": "4.17.20",
|
|
51
51
|
"@types/react-window": "1.8.8",
|
|
52
52
|
"@types/url-parse": "1.4.9",
|
|
53
|
-
"@types/video.js": "7.3.58",
|
|
54
53
|
"@typescript-eslint/parser": "^7.0.0",
|
|
55
54
|
"@vitejs/plugin-react": "4.5.1",
|
|
56
55
|
"class-variance-authority": "0.7.1",
|
|
@@ -27,6 +27,8 @@ interface VideoPlayerProps {
|
|
|
27
27
|
muted?: boolean
|
|
28
28
|
poster?: string
|
|
29
29
|
autoplay?: boolean
|
|
30
|
+
preload?: 'none' | 'metadata' | 'auto'
|
|
31
|
+
loop?: boolean
|
|
30
32
|
width?: number
|
|
31
33
|
height?: number
|
|
32
34
|
playButtonComponent?: React.ReactNode
|
|
@@ -46,6 +48,8 @@ export const VideoPlayer: React.ForwardRefExoticComponent<
|
|
|
46
48
|
poster,
|
|
47
49
|
muted,
|
|
48
50
|
autoplay,
|
|
51
|
+
preload = 'auto',
|
|
52
|
+
loop = 'false',
|
|
49
53
|
width,
|
|
50
54
|
height,
|
|
51
55
|
playButtonComponent,
|
|
@@ -93,7 +97,8 @@ export const VideoPlayer: React.ForwardRefExoticComponent<
|
|
|
93
97
|
inline: false,
|
|
94
98
|
},
|
|
95
99
|
},
|
|
96
|
-
preload
|
|
100
|
+
preload,
|
|
101
|
+
loop,
|
|
97
102
|
muted,
|
|
98
103
|
// This makes sure that the video player does not take over the whole screen
|
|
99
104
|
preferFullWindow: false,
|
|
@@ -108,7 +113,7 @@ export const VideoPlayer: React.ForwardRefExoticComponent<
|
|
|
108
113
|
},
|
|
109
114
|
],
|
|
110
115
|
}),
|
|
111
|
-
[muted, poster, height, width, src, format]
|
|
116
|
+
[muted, poster, height, width, src, format, preload, loop]
|
|
112
117
|
)
|
|
113
118
|
|
|
114
119
|
useEffect(() => {
|