react-datocms 7.2.6 → 7.2.7
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.
- package/dist/cjs/VideoPlayer/index.js +19 -1
- package/dist/cjs/VideoPlayer/index.js.map +1 -1
- package/dist/esm/VideoPlayer/index.js +19 -1
- package/dist/esm/VideoPlayer/index.js.map +1 -1
- package/dist/types/VideoPlayer/index.d.ts +2 -0
- package/package.json +1 -1
- package/src/VideoPlayer/index.tsx +23 -0
|
@@ -72,6 +72,24 @@ exports.VideoPlayer = (0, react_1.forwardRef)((props, ref) => {
|
|
|
72
72
|
data,
|
|
73
73
|
});
|
|
74
74
|
const style = Object.assign(Object.assign({}, styleFromHook), styleFromProps);
|
|
75
|
-
|
|
75
|
+
// Extract alt for DatoCMS Content Link integration
|
|
76
|
+
// See: https://github.com/datocms/content-link
|
|
77
|
+
const { alt } = data;
|
|
78
|
+
// Note: Custom data-* attributes can be passed to the underlying <mux-player> web component
|
|
79
|
+
// in two ways:
|
|
80
|
+
//
|
|
81
|
+
// 1. Kebab-case (passes through as-is):
|
|
82
|
+
// <VideoPlayer data-player-id="my-player" />
|
|
83
|
+
//
|
|
84
|
+
// 2. CamelCase (auto-converts to kebab-case):
|
|
85
|
+
// <VideoPlayer dataPlayerId="my-player" />
|
|
86
|
+
//
|
|
87
|
+
// Both result in: <mux-player data-player-id="my-player">
|
|
88
|
+
//
|
|
89
|
+
// The MuxPlayer React component transforms camelCase props to kebab-case to match
|
|
90
|
+
// web component attribute conventions. Any props not explicitly handled by VideoPlayer
|
|
91
|
+
// are spread via {...rest} and forwarded to MuxPlayer, which then applies them to
|
|
92
|
+
// the underlying <mux-player> element.
|
|
93
|
+
return (react_1.default.createElement(lazy_1.default, Object.assign({ ref: ref, streamType: "on-demand", preload: preload, title: title, disableCookies: disableCookies, disableTracking: disableTracking, playbackId: playbackId, style: style, placeholder: placeholder, "data-datocms-content-link-source": alt }, rest)));
|
|
76
94
|
});
|
|
77
95
|
//# sourceMappingURL=index.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/VideoPlayer/index.tsx"],"names":[],"mappings":";AAAA,YAAY,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAEb,gFAAgF;AAChF,8EAA8E;AAC9E,2EAA2E;AAC3E,EAAE;AACF,qEAAqE;AACrE,EAAE;AACF,kCAAkC;AAElC,+CAA0C;AAO1C,gFAAgF;AAChF,+EAA+E;AAC/E,mEAAmE;AACnE,kBAAkB;AAElB,sEAAmD;AAEnD,oEAAoE;AACpE,qEAAqE;AACrE,6BAA6B;AAE7B,yDAA4D;
|
|
1
|
+
{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/VideoPlayer/index.tsx"],"names":[],"mappings":";AAAA,YAAY,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAEb,gFAAgF;AAChF,8EAA8E;AAC9E,2EAA2E;AAC3E,EAAE;AACF,qEAAqE;AACrE,EAAE;AACF,kCAAkC;AAElC,+CAA0C;AAO1C,gFAAgF;AAChF,+EAA+E;AAC/E,mEAAmE;AACnE,kBAAkB;AAElB,sEAAmD;AAEnD,oEAAoE;AACpE,qEAAqE;AACrE,6BAA6B;AAE7B,yDAA4D;AAuC/C,QAAA,WAAW,GAEY,IAAA,kBAAU,EAG5C,CAAC,KAAK,EAAE,GAAG,EAAE,EAAE;IACf,MAAM,EACJ,IAAI,GAAG,EAAE,EACT,cAAc,GAAG,IAAI,EACrB,eAAe,GAAG,IAAI,EACtB,OAAO,GAAG,UAAU,EACpB,KAAK,EAAE,cAAc,KAEnB,KAAK,EADJ,IAAI,UACL,KAAK,EAPH,iEAOL,CAAQ,CAAC;IAEV,MAAM,EACJ,KAAK,EACL,UAAU,EACV,KAAK,EAAE,aAAa,EACpB,WAAW,GACZ,GAAG,IAAA,yBAAc,EAAC;QACjB,IAAI;KACL,CAAC,CAAC;IAEH,MAAM,KAAK,mCACN,aAAa,GACb,cAAc,CAClB,CAAC;IAEF,mDAAmD;IACnD,+CAA+C;IAC/C,MAAM,EAAE,GAAG,EAAE,GAAG,IAAI,CAAC;IAErB,4FAA4F;IAC5F,eAAe;IACf,EAAE;IACF,wCAAwC;IACxC,gDAAgD;IAChD,EAAE;IACF,8CAA8C;IAC9C,8CAA8C;IAC9C,EAAE;IACF,0DAA0D;IAC1D,EAAE;IACF,kFAAkF;IAClF,uFAAuF;IACvF,kFAAkF;IAClF,uCAAuC;IAEvC,OAAO,CACL,8BAAC,cAAS,kBACR,GAAG,EAAE,GAAG,EACR,UAAU,EAAC,WAAW,EACtB,OAAO,EAAE,OAAO,EAChB,KAAK,EAAE,KAAK,EACZ,cAAc,EAAE,cAAc,EAC9B,eAAe,EAAE,eAAe,EAChC,UAAU,EAAE,UAAU,EACtB,KAAK,EAAE,KAAK,EACZ,WAAW,EAAE,WAAW,sCACU,GAAG,IACjC,IAAI,EACR,CACH,CAAC;AACJ,CAAC,CAAC,CAAC"}
|
|
@@ -33,6 +33,24 @@ export const VideoPlayer = forwardRef((props, ref) => {
|
|
|
33
33
|
data,
|
|
34
34
|
});
|
|
35
35
|
const style = Object.assign(Object.assign({}, styleFromHook), styleFromProps);
|
|
36
|
-
|
|
36
|
+
// Extract alt for DatoCMS Content Link integration
|
|
37
|
+
// See: https://github.com/datocms/content-link
|
|
38
|
+
const { alt } = data;
|
|
39
|
+
// Note: Custom data-* attributes can be passed to the underlying <mux-player> web component
|
|
40
|
+
// in two ways:
|
|
41
|
+
//
|
|
42
|
+
// 1. Kebab-case (passes through as-is):
|
|
43
|
+
// <VideoPlayer data-player-id="my-player" />
|
|
44
|
+
//
|
|
45
|
+
// 2. CamelCase (auto-converts to kebab-case):
|
|
46
|
+
// <VideoPlayer dataPlayerId="my-player" />
|
|
47
|
+
//
|
|
48
|
+
// Both result in: <mux-player data-player-id="my-player">
|
|
49
|
+
//
|
|
50
|
+
// The MuxPlayer React component transforms camelCase props to kebab-case to match
|
|
51
|
+
// web component attribute conventions. Any props not explicitly handled by VideoPlayer
|
|
52
|
+
// are spread via {...rest} and forwarded to MuxPlayer, which then applies them to
|
|
53
|
+
// the underlying <mux-player> element.
|
|
54
|
+
return (React.createElement(MuxPlayer, Object.assign({ ref: ref, streamType: "on-demand", preload: preload, title: title, disableCookies: disableCookies, disableTracking: disableTracking, playbackId: playbackId, style: style, placeholder: placeholder, "data-datocms-content-link-source": alt }, rest)));
|
|
37
55
|
});
|
|
38
56
|
//# sourceMappingURL=index.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/VideoPlayer/index.tsx"],"names":[],"mappings":"AAAA,YAAY,CAAC;;;;;;;;;;;;AAEb,gFAAgF;AAChF,8EAA8E;AAC9E,2EAA2E;AAC3E,EAAE;AACF,qEAAqE;AACrE,EAAE;AACF,kCAAkC;AAElC,OAAO,KAAK,EAAE,EAAE,UAAU,EAAE,MAAM,OAAO,CAAC;AAO1C,gFAAgF;AAChF,+EAA+E;AAC/E,mEAAmE;AACnE,kBAAkB;AAElB,OAAO,SAAS,MAAM,4BAA4B,CAAC;AAEnD,oEAAoE;AACpE,qEAAqE;AACrE,6BAA6B;AAE7B,OAAO,EAAE,cAAc,EAAE,MAAM,4BAA4B,CAAC;
|
|
1
|
+
{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/VideoPlayer/index.tsx"],"names":[],"mappings":"AAAA,YAAY,CAAC;;;;;;;;;;;;AAEb,gFAAgF;AAChF,8EAA8E;AAC9E,2EAA2E;AAC3E,EAAE;AACF,qEAAqE;AACrE,EAAE;AACF,kCAAkC;AAElC,OAAO,KAAK,EAAE,EAAE,UAAU,EAAE,MAAM,OAAO,CAAC;AAO1C,gFAAgF;AAChF,+EAA+E;AAC/E,mEAAmE;AACnE,kBAAkB;AAElB,OAAO,SAAS,MAAM,4BAA4B,CAAC;AAEnD,oEAAoE;AACpE,qEAAqE;AACrE,6BAA6B;AAE7B,OAAO,EAAE,cAAc,EAAE,MAAM,4BAA4B,CAAC;AAuC5D,MAAM,CAAC,MAAM,WAAW,GAEY,UAAU,CAG5C,CAAC,KAAK,EAAE,GAAG,EAAE,EAAE;IACf,MAAM,EACJ,IAAI,GAAG,EAAE,EACT,cAAc,GAAG,IAAI,EACrB,eAAe,GAAG,IAAI,EACtB,OAAO,GAAG,UAAU,EACpB,KAAK,EAAE,cAAc,KAEnB,KAAK,EADJ,IAAI,UACL,KAAK,EAPH,iEAOL,CAAQ,CAAC;IAEV,MAAM,EACJ,KAAK,EACL,UAAU,EACV,KAAK,EAAE,aAAa,EACpB,WAAW,GACZ,GAAG,cAAc,CAAC;QACjB,IAAI;KACL,CAAC,CAAC;IAEH,MAAM,KAAK,mCACN,aAAa,GACb,cAAc,CAClB,CAAC;IAEF,mDAAmD;IACnD,+CAA+C;IAC/C,MAAM,EAAE,GAAG,EAAE,GAAG,IAAI,CAAC;IAErB,4FAA4F;IAC5F,eAAe;IACf,EAAE;IACF,wCAAwC;IACxC,gDAAgD;IAChD,EAAE;IACF,8CAA8C;IAC9C,8CAA8C;IAC9C,EAAE;IACF,0DAA0D;IAC1D,EAAE;IACF,kFAAkF;IAClF,uFAAuF;IACvF,kFAAkF;IAClF,uCAAuC;IAEvC,OAAO,CACL,oBAAC,SAAS,kBACR,GAAG,EAAE,GAAG,EACR,UAAU,EAAC,WAAW,EACtB,OAAO,EAAE,OAAO,EAChB,KAAK,EAAE,KAAK,EACZ,cAAc,EAAE,cAAc,EAC9B,eAAe,EAAE,eAAe,EAChC,UAAU,EAAE,UAAU,EACtB,KAAK,EAAE,KAAK,EACZ,WAAW,EAAE,WAAW,sCACU,GAAG,IACjC,IAAI,EACR,CACH,CAAC;AACJ,CAAC,CAAC,CAAC"}
|
|
@@ -5,6 +5,8 @@ type Possibly<T> = Maybe<T> | undefined;
|
|
|
5
5
|
export type Video = {
|
|
6
6
|
/** Title attribute (`title`) for the video */
|
|
7
7
|
title?: Possibly<string>;
|
|
8
|
+
/** Alt attribute used for content link integration (passed as data-datocms-content-link-source) */
|
|
9
|
+
alt?: Possibly<string>;
|
|
8
10
|
/** The height of the video */
|
|
9
11
|
height?: Possibly<number>;
|
|
10
12
|
/** The width of the video */
|
package/package.json
CHANGED
|
@@ -37,6 +37,8 @@ type Possibly<T> = Maybe<T> | undefined;
|
|
|
37
37
|
export type Video = {
|
|
38
38
|
/** Title attribute (`title`) for the video */
|
|
39
39
|
title?: Possibly<string>;
|
|
40
|
+
/** Alt attribute used for content link integration (passed as data-datocms-content-link-source) */
|
|
41
|
+
alt?: Possibly<string>;
|
|
40
42
|
/** The height of the video */
|
|
41
43
|
height?: Possibly<number>;
|
|
42
44
|
/** The width of the video */
|
|
@@ -92,6 +94,26 @@ export const VideoPlayer: (
|
|
|
92
94
|
...styleFromProps,
|
|
93
95
|
};
|
|
94
96
|
|
|
97
|
+
// Extract alt for DatoCMS Content Link integration
|
|
98
|
+
// See: https://github.com/datocms/content-link
|
|
99
|
+
const { alt } = data;
|
|
100
|
+
|
|
101
|
+
// Note: Custom data-* attributes can be passed to the underlying <mux-player> web component
|
|
102
|
+
// in two ways:
|
|
103
|
+
//
|
|
104
|
+
// 1. Kebab-case (passes through as-is):
|
|
105
|
+
// <VideoPlayer data-player-id="my-player" />
|
|
106
|
+
//
|
|
107
|
+
// 2. CamelCase (auto-converts to kebab-case):
|
|
108
|
+
// <VideoPlayer dataPlayerId="my-player" />
|
|
109
|
+
//
|
|
110
|
+
// Both result in: <mux-player data-player-id="my-player">
|
|
111
|
+
//
|
|
112
|
+
// The MuxPlayer React component transforms camelCase props to kebab-case to match
|
|
113
|
+
// web component attribute conventions. Any props not explicitly handled by VideoPlayer
|
|
114
|
+
// are spread via {...rest} and forwarded to MuxPlayer, which then applies them to
|
|
115
|
+
// the underlying <mux-player> element.
|
|
116
|
+
|
|
95
117
|
return (
|
|
96
118
|
<MuxPlayer
|
|
97
119
|
ref={ref}
|
|
@@ -103,6 +125,7 @@ export const VideoPlayer: (
|
|
|
103
125
|
playbackId={playbackId}
|
|
104
126
|
style={style}
|
|
105
127
|
placeholder={placeholder}
|
|
128
|
+
data-datocms-content-link-source={alt}
|
|
106
129
|
{...rest}
|
|
107
130
|
/>
|
|
108
131
|
);
|