react-datocms 7.2.6 → 7.2.9
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/ContentLink/index.js +2 -1
- package/dist/cjs/ContentLink/index.js.map +1 -1
- package/dist/cjs/VideoPlayer/index.js +22 -1
- package/dist/cjs/VideoPlayer/index.js.map +1 -1
- package/dist/cjs/useContentLink/index.js.map +1 -1
- package/dist/esm/ContentLink/index.js +2 -1
- package/dist/esm/ContentLink/index.js.map +1 -1
- package/dist/esm/VideoPlayer/index.js +22 -1
- package/dist/esm/VideoPlayer/index.js.map +1 -1
- package/dist/esm/useContentLink/index.js.map +1 -1
- package/dist/types/ContentLink/index.d.ts +2 -2
- package/dist/types/VideoPlayer/index.d.ts +2 -0
- package/package.json +1 -1
- package/src/ContentLink/index.tsx +6 -3
- package/src/VideoPlayer/index.tsx +27 -0
- package/src/useContentLink/index.ts +2 -1
|
@@ -90,7 +90,8 @@ function ContentLink(props) {
|
|
|
90
90
|
}, [currentPath, setCurrentPath]);
|
|
91
91
|
// Enable click-to-edit on mount if requested
|
|
92
92
|
(0, react_1.useEffect)(() => {
|
|
93
|
-
if (enableClickToEditOptions !== undefined
|
|
93
|
+
if (enableClickToEditOptions !== undefined &&
|
|
94
|
+
enableClickToEditOptions !== false) {
|
|
94
95
|
enableClickToEdit(enableClickToEditOptions === true
|
|
95
96
|
? undefined
|
|
96
97
|
: enableClickToEditOptions);
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/ContentLink/index.tsx"],"names":[],"mappings":";AAAA,YAAY,CAAC;;;;;;;;;;;;;AAiFb,
|
|
1
|
+
{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/ContentLink/index.tsx"],"names":[],"mappings":";AAAA,YAAY,CAAC;;;;;;;;;;;;;AAiFb,kCAmCC;AAlHD,iCAAkC;AAClC,yDAGoC;AAWpC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA+DG;AACH,SAAgB,WAAW,CAAC,KAAuB;IACjD,MAAM,EACJ,WAAW,EACX,iBAAiB,EAAE,wBAAwB,EAC3C,UAAU,KAER,KAAK,EADJ,qBAAqB,UACtB,KAAK,EALH,kDAKL,CAAQ,CAAC;IAEV,MAAM,EAAE,iBAAiB,EAAE,cAAc,EAAE,GAAG,IAAA,yBAAc,kCACvD,qBAAqB,KACxB,OAAO,EAAE,UAAU,KAAK,SAAS,CAAC,CAAC,CAAC,EAAE,UAAU,EAAE,CAAC,CAAC,CAAC,IAAI,IACzD,CAAC;IAEH,oCAAoC;IACpC,IAAA,iBAAS,EAAC,GAAG,EAAE;QACb,IAAI,WAAW,KAAK,SAAS,EAAE,CAAC;YAC9B,cAAc,CAAC,WAAW,CAAC,CAAC;QAC9B,CAAC;IACH,CAAC,EAAE,CAAC,WAAW,EAAE,cAAc,CAAC,CAAC,CAAC;IAElC,6CAA6C;IAC7C,IAAA,iBAAS,EAAC,GAAG,EAAE;QACb,IACE,wBAAwB,KAAK,SAAS;YACtC,wBAAwB,KAAK,KAAK,EAClC,CAAC;YACD,iBAAiB,CACf,wBAAwB,KAAK,IAAI;gBAC/B,CAAC,CAAC,SAAS;gBACX,CAAC,CAAC,wBAAwB,CAC7B,CAAC;QACJ,CAAC;IACH,CAAC,EAAE,CAAC,wBAAwB,EAAE,iBAAiB,CAAC,CAAC,CAAC;IAElD,OAAO,IAAI,CAAC;AACd,CAAC"}
|
|
@@ -65,6 +65,7 @@ const lazy_1 = __importDefault(require("@mux/mux-player-react/lazy"));
|
|
|
65
65
|
// The core of this component is the `useVideoPlayer` hook: it takes
|
|
66
66
|
// data from DatoCMS GraphQL API and returns props as expected by the
|
|
67
67
|
// `<MuxPlayer />` component.
|
|
68
|
+
const content_link_1 = require("@datocms/content-link");
|
|
68
69
|
const index_js_1 = require("../useVideoPlayer/index.js");
|
|
69
70
|
exports.VideoPlayer = (0, react_1.forwardRef)((props, ref) => {
|
|
70
71
|
const { data = {}, disableCookies = true, disableTracking = true, preload = 'metadata', style: styleFromProps } = props, rest = __rest(props, ["data", "disableCookies", "disableTracking", "preload", "style"]);
|
|
@@ -72,6 +73,26 @@ exports.VideoPlayer = (0, react_1.forwardRef)((props, ref) => {
|
|
|
72
73
|
data,
|
|
73
74
|
});
|
|
74
75
|
const style = Object.assign(Object.assign({}, styleFromHook), styleFromProps);
|
|
75
|
-
|
|
76
|
+
// Extract alt for DatoCMS Content Link integration
|
|
77
|
+
// See: https://github.com/datocms/content-link
|
|
78
|
+
const { alt } = data;
|
|
79
|
+
// Only include data-datocms-content-link-source if alt contains stega encoding
|
|
80
|
+
const contentLinkSource = alt && (0, content_link_1.decodeStega)(alt) ? alt : undefined;
|
|
81
|
+
// Note: Custom data-* attributes can be passed to the underlying <mux-player> web component
|
|
82
|
+
// in two ways:
|
|
83
|
+
//
|
|
84
|
+
// 1. Kebab-case (passes through as-is):
|
|
85
|
+
// <VideoPlayer data-player-id="my-player" />
|
|
86
|
+
//
|
|
87
|
+
// 2. CamelCase (auto-converts to kebab-case):
|
|
88
|
+
// <VideoPlayer dataPlayerId="my-player" />
|
|
89
|
+
//
|
|
90
|
+
// Both result in: <mux-player data-player-id="my-player">
|
|
91
|
+
//
|
|
92
|
+
// The MuxPlayer React component transforms camelCase props to kebab-case to match
|
|
93
|
+
// web component attribute conventions. Any props not explicitly handled by VideoPlayer
|
|
94
|
+
// are spread via {...rest} and forwarded to MuxPlayer, which then applies them to
|
|
95
|
+
// the underlying <mux-player> element.
|
|
96
|
+
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": contentLinkSource }, rest)));
|
|
76
97
|
});
|
|
77
98
|
//# 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,wDAAoD;AACpD,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,+EAA+E;IAC/E,MAAM,iBAAiB,GAAG,GAAG,IAAI,IAAA,0BAAW,EAAC,GAAG,CAAC,CAAC,CAAC,CAAC,GAAG,CAAC,CAAC,CAAC,SAAS,CAAC;IAEpE,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,iBAAiB,IAC/C,IAAI,EACR,CACH,CAAC;AACJ,CAAC,CAAC,CAAC"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/useContentLink/index.ts"],"names":[],"mappings":";AAAA,YAAY,CAAC;;;AAyEb,
|
|
1
|
+
{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/useContentLink/index.ts"],"names":[],"mappings":"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"}
|
|
@@ -87,7 +87,8 @@ export function ContentLink(props) {
|
|
|
87
87
|
}, [currentPath, setCurrentPath]);
|
|
88
88
|
// Enable click-to-edit on mount if requested
|
|
89
89
|
useEffect(() => {
|
|
90
|
-
if (enableClickToEditOptions !== undefined
|
|
90
|
+
if (enableClickToEditOptions !== undefined &&
|
|
91
|
+
enableClickToEditOptions !== false) {
|
|
91
92
|
enableClickToEdit(enableClickToEditOptions === true
|
|
92
93
|
? undefined
|
|
93
94
|
: enableClickToEditOptions);
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/ContentLink/index.tsx"],"names":[],"mappings":"AAAA,YAAY,CAAC;;;;;;;;;;;;AAEb,OAAO,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAClC,OAAO,EAEL,cAAc,GACf,MAAM,4BAA4B,CAAC;AAWpC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA+DG;AACH,MAAM,UAAU,WAAW,CAAC,KAAuB;IACjD,MAAM,EACJ,WAAW,EACX,iBAAiB,EAAE,wBAAwB,EAC3C,UAAU,KAER,KAAK,EADJ,qBAAqB,UACtB,KAAK,EALH,kDAKL,CAAQ,CAAC;IAEV,MAAM,EAAE,iBAAiB,EAAE,cAAc,EAAE,GAAG,cAAc,iCACvD,qBAAqB,KACxB,OAAO,EAAE,UAAU,KAAK,SAAS,CAAC,CAAC,CAAC,EAAE,UAAU,EAAE,CAAC,CAAC,CAAC,IAAI,IACzD,CAAC;IAEH,oCAAoC;IACpC,SAAS,CAAC,GAAG,EAAE;QACb,IAAI,WAAW,KAAK,SAAS,EAAE,CAAC;YAC9B,cAAc,CAAC,WAAW,CAAC,CAAC;QAC9B,CAAC;IACH,CAAC,EAAE,CAAC,WAAW,EAAE,cAAc,CAAC,CAAC,CAAC;IAElC,6CAA6C;IAC7C,SAAS,CAAC,GAAG,EAAE;QACb,
|
|
1
|
+
{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/ContentLink/index.tsx"],"names":[],"mappings":"AAAA,YAAY,CAAC;;;;;;;;;;;;AAEb,OAAO,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAClC,OAAO,EAEL,cAAc,GACf,MAAM,4BAA4B,CAAC;AAWpC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA+DG;AACH,MAAM,UAAU,WAAW,CAAC,KAAuB;IACjD,MAAM,EACJ,WAAW,EACX,iBAAiB,EAAE,wBAAwB,EAC3C,UAAU,KAER,KAAK,EADJ,qBAAqB,UACtB,KAAK,EALH,kDAKL,CAAQ,CAAC;IAEV,MAAM,EAAE,iBAAiB,EAAE,cAAc,EAAE,GAAG,cAAc,iCACvD,qBAAqB,KACxB,OAAO,EAAE,UAAU,KAAK,SAAS,CAAC,CAAC,CAAC,EAAE,UAAU,EAAE,CAAC,CAAC,CAAC,IAAI,IACzD,CAAC;IAEH,oCAAoC;IACpC,SAAS,CAAC,GAAG,EAAE;QACb,IAAI,WAAW,KAAK,SAAS,EAAE,CAAC;YAC9B,cAAc,CAAC,WAAW,CAAC,CAAC;QAC9B,CAAC;IACH,CAAC,EAAE,CAAC,WAAW,EAAE,cAAc,CAAC,CAAC,CAAC;IAElC,6CAA6C;IAC7C,SAAS,CAAC,GAAG,EAAE;QACb,IACE,wBAAwB,KAAK,SAAS;YACtC,wBAAwB,KAAK,KAAK,EAClC,CAAC;YACD,iBAAiB,CACf,wBAAwB,KAAK,IAAI;gBAC/B,CAAC,CAAC,SAAS;gBACX,CAAC,CAAC,wBAAwB,CAC7B,CAAC;QACJ,CAAC;IACH,CAAC,EAAE,CAAC,wBAAwB,EAAE,iBAAiB,CAAC,CAAC,CAAC;IAElD,OAAO,IAAI,CAAC;AACd,CAAC"}
|
|
@@ -26,6 +26,7 @@ import MuxPlayer from '@mux/mux-player-react/lazy';
|
|
|
26
26
|
// The core of this component is the `useVideoPlayer` hook: it takes
|
|
27
27
|
// data from DatoCMS GraphQL API and returns props as expected by the
|
|
28
28
|
// `<MuxPlayer />` component.
|
|
29
|
+
import { decodeStega } from '@datocms/content-link';
|
|
29
30
|
import { useVideoPlayer } from '../useVideoPlayer/index.js';
|
|
30
31
|
export const VideoPlayer = forwardRef((props, ref) => {
|
|
31
32
|
const { data = {}, disableCookies = true, disableTracking = true, preload = 'metadata', style: styleFromProps } = props, rest = __rest(props, ["data", "disableCookies", "disableTracking", "preload", "style"]);
|
|
@@ -33,6 +34,26 @@ export const VideoPlayer = forwardRef((props, ref) => {
|
|
|
33
34
|
data,
|
|
34
35
|
});
|
|
35
36
|
const style = Object.assign(Object.assign({}, styleFromHook), styleFromProps);
|
|
36
|
-
|
|
37
|
+
// Extract alt for DatoCMS Content Link integration
|
|
38
|
+
// See: https://github.com/datocms/content-link
|
|
39
|
+
const { alt } = data;
|
|
40
|
+
// Only include data-datocms-content-link-source if alt contains stega encoding
|
|
41
|
+
const contentLinkSource = alt && decodeStega(alt) ? alt : undefined;
|
|
42
|
+
// Note: Custom data-* attributes can be passed to the underlying <mux-player> web component
|
|
43
|
+
// in two ways:
|
|
44
|
+
//
|
|
45
|
+
// 1. Kebab-case (passes through as-is):
|
|
46
|
+
// <VideoPlayer data-player-id="my-player" />
|
|
47
|
+
//
|
|
48
|
+
// 2. CamelCase (auto-converts to kebab-case):
|
|
49
|
+
// <VideoPlayer dataPlayerId="my-player" />
|
|
50
|
+
//
|
|
51
|
+
// Both result in: <mux-player data-player-id="my-player">
|
|
52
|
+
//
|
|
53
|
+
// The MuxPlayer React component transforms camelCase props to kebab-case to match
|
|
54
|
+
// web component attribute conventions. Any props not explicitly handled by VideoPlayer
|
|
55
|
+
// are spread via {...rest} and forwarded to MuxPlayer, which then applies them to
|
|
56
|
+
// the underlying <mux-player> element.
|
|
57
|
+
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": contentLinkSource }, rest)));
|
|
37
58
|
});
|
|
38
59
|
//# 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,WAAW,EAAE,MAAM,uBAAuB,CAAC;AACpD,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,+EAA+E;IAC/E,MAAM,iBAAiB,GAAG,GAAG,IAAI,WAAW,CAAC,GAAG,CAAC,CAAC,CAAC,CAAC,GAAG,CAAC,CAAC,CAAC,SAAS,CAAC;IAEpE,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,iBAAiB,IAC/C,IAAI,EACR,CACH,CAAC;AACJ,CAAC,CAAC,CAAC"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/useContentLink/index.ts"],"names":[],"mappings":"AAAA,YAAY,CAAC;AAEb,OAAO,EAAmB,gBAAgB,EAAE,MAAM,uBAAuB,CAAC;AAC1E,OAAO,EAAE,WAAW,EAAE,SAAS,EAAE,MAAM,EAAE,MAAM,OAAO,CAAC;AAIvD,OAAO,EAAE,WAAW,EAAE,UAAU,EAAE,MAAM,uBAAuB,CAAC;AAuChE;;;;;;;;;;;;;;;;;;;;;;;;;;GA0BG;AACH,MAAM,UAAU,cAAc,CAC5B,UAAiC,EAAE;IAEnC,MAAM,EAAE,OAAO,GAAG,IAAI,EAAE,YAAY,EAAE,IAAI,EAAE,GAAG,OAAO,CAAC;IAEvD,MAAM,aAAa,GAAG,MAAM,CAAoB,IAAI,CAAC,CAAC;IACtD,iFAAiF;IACjF,MAAM,eAAe,GAAG,MAAM,CAAC,YAAY,CAAC,CAAC;IAE7C,mCAAmC;IACnC,SAAS,CAAC,GAAG,EAAE;QACb,eAAe,CAAC,OAAO,GAAG,YAAY,CAAC;IACzC,CAAC,EAAE,CAAC,YAAY,CAAC,CAAC,CAAC;IAEnB,gEAAgE;IAChE,qFAAqF;IACrF,SAAS,CAAC,GAAG,EAAE;QACb,kCAAkC;QAClC,MAAM,SAAS,
|
|
1
|
+
{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/useContentLink/index.ts"],"names":[],"mappings":"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"}
|
|
@@ -2,8 +2,8 @@ import { type UseContentLinkOptions } from '../useContentLink/index.js';
|
|
|
2
2
|
export type ContentLinkProps = Omit<UseContentLinkOptions, 'enabled'> & {
|
|
3
3
|
/** Current pathname to sync with Web Previews plugin */
|
|
4
4
|
currentPath?: string;
|
|
5
|
-
/** Enable click-to-edit on mount. Pass true for default behavior or an object with scrollToNearestTarget. If undefined, click-to-edit is disabled. */
|
|
6
|
-
enableClickToEdit?:
|
|
5
|
+
/** Enable click-to-edit on mount. Pass true for default behavior or an object with scrollToNearestTarget. If undefined or false, click-to-edit is disabled. */
|
|
6
|
+
enableClickToEdit?: boolean | {
|
|
7
7
|
scrollToNearestTarget: true;
|
|
8
8
|
};
|
|
9
9
|
/** Whether to strip stega encoding from text nodes after stamping. */
|
|
@@ -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
|
@@ -9,8 +9,8 @@ import {
|
|
|
9
9
|
export type ContentLinkProps = Omit<UseContentLinkOptions, 'enabled'> & {
|
|
10
10
|
/** Current pathname to sync with Web Previews plugin */
|
|
11
11
|
currentPath?: string;
|
|
12
|
-
/** Enable click-to-edit on mount. Pass true for default behavior or an object with scrollToNearestTarget. If undefined, click-to-edit is disabled. */
|
|
13
|
-
enableClickToEdit?:
|
|
12
|
+
/** Enable click-to-edit on mount. Pass true for default behavior or an object with scrollToNearestTarget. If undefined or false, click-to-edit is disabled. */
|
|
13
|
+
enableClickToEdit?: boolean | { scrollToNearestTarget: true };
|
|
14
14
|
/** Whether to strip stega encoding from text nodes after stamping. */
|
|
15
15
|
stripStega?: boolean;
|
|
16
16
|
};
|
|
@@ -101,7 +101,10 @@ export function ContentLink(props: ContentLinkProps): null {
|
|
|
101
101
|
|
|
102
102
|
// Enable click-to-edit on mount if requested
|
|
103
103
|
useEffect(() => {
|
|
104
|
-
if (
|
|
104
|
+
if (
|
|
105
|
+
enableClickToEditOptions !== undefined &&
|
|
106
|
+
enableClickToEditOptions !== false
|
|
107
|
+
) {
|
|
105
108
|
enableClickToEdit(
|
|
106
109
|
enableClickToEditOptions === true
|
|
107
110
|
? undefined
|
|
@@ -26,6 +26,7 @@ import MuxPlayer from '@mux/mux-player-react/lazy';
|
|
|
26
26
|
// data from DatoCMS GraphQL API and returns props as expected by the
|
|
27
27
|
// `<MuxPlayer />` component.
|
|
28
28
|
|
|
29
|
+
import { decodeStega } from '@datocms/content-link';
|
|
29
30
|
import { useVideoPlayer } from '../useVideoPlayer/index.js';
|
|
30
31
|
|
|
31
32
|
type Maybe<T> = T | null;
|
|
@@ -37,6 +38,8 @@ type Possibly<T> = Maybe<T> | undefined;
|
|
|
37
38
|
export type Video = {
|
|
38
39
|
/** Title attribute (`title`) for the video */
|
|
39
40
|
title?: Possibly<string>;
|
|
41
|
+
/** Alt attribute used for content link integration (passed as data-datocms-content-link-source) */
|
|
42
|
+
alt?: Possibly<string>;
|
|
40
43
|
/** The height of the video */
|
|
41
44
|
height?: Possibly<number>;
|
|
42
45
|
/** The width of the video */
|
|
@@ -92,6 +95,29 @@ export const VideoPlayer: (
|
|
|
92
95
|
...styleFromProps,
|
|
93
96
|
};
|
|
94
97
|
|
|
98
|
+
// Extract alt for DatoCMS Content Link integration
|
|
99
|
+
// See: https://github.com/datocms/content-link
|
|
100
|
+
const { alt } = data;
|
|
101
|
+
|
|
102
|
+
// Only include data-datocms-content-link-source if alt contains stega encoding
|
|
103
|
+
const contentLinkSource = alt && decodeStega(alt) ? alt : undefined;
|
|
104
|
+
|
|
105
|
+
// Note: Custom data-* attributes can be passed to the underlying <mux-player> web component
|
|
106
|
+
// in two ways:
|
|
107
|
+
//
|
|
108
|
+
// 1. Kebab-case (passes through as-is):
|
|
109
|
+
// <VideoPlayer data-player-id="my-player" />
|
|
110
|
+
//
|
|
111
|
+
// 2. CamelCase (auto-converts to kebab-case):
|
|
112
|
+
// <VideoPlayer dataPlayerId="my-player" />
|
|
113
|
+
//
|
|
114
|
+
// Both result in: <mux-player data-player-id="my-player">
|
|
115
|
+
//
|
|
116
|
+
// The MuxPlayer React component transforms camelCase props to kebab-case to match
|
|
117
|
+
// web component attribute conventions. Any props not explicitly handled by VideoPlayer
|
|
118
|
+
// are spread via {...rest} and forwarded to MuxPlayer, which then applies them to
|
|
119
|
+
// the underlying <mux-player> element.
|
|
120
|
+
|
|
95
121
|
return (
|
|
96
122
|
<MuxPlayer
|
|
97
123
|
ref={ref}
|
|
@@ -103,6 +129,7 @@ export const VideoPlayer: (
|
|
|
103
129
|
playbackId={playbackId}
|
|
104
130
|
style={style}
|
|
105
131
|
placeholder={placeholder}
|
|
132
|
+
data-datocms-content-link-source={contentLinkSource}
|
|
106
133
|
{...rest}
|
|
107
134
|
/>
|
|
108
135
|
);
|
|
@@ -89,7 +89,8 @@ export function useContentLink(
|
|
|
89
89
|
// The onNavigateTo callback is accessed via ref, so changes don't trigger recreation
|
|
90
90
|
useEffect(() => {
|
|
91
91
|
// Check if controller is disabled
|
|
92
|
-
const isEnabled =
|
|
92
|
+
const isEnabled =
|
|
93
|
+
enabled === true || (typeof enabled === 'object' && enabled !== null);
|
|
93
94
|
|
|
94
95
|
if (!isEnabled) {
|
|
95
96
|
if (controllerRef.current) {
|