@cntrl-site/sdk-nextjs 0.2.4 → 0.2.6
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/.idea/workspace.xml +197 -0
- package/cntrl-site-sdk-nextjs-0.2.5.tgz +0 -0
- package/lib/components/Item.js +2 -1
- package/lib/components/items/VimeoEmbed.js +1 -1
- package/lib/components/items/YoutubeEmbed.js +42 -0
- package/lib/index.js +8 -3
- package/lib/utils/getValidYoutubeUrl.js +25 -0
- package/package.json +1 -1
- package/src/components/Item.tsx +2 -1
- package/src/components/items/VimeoEmbed.tsx +2 -3
- package/src/components/items/YoutubeEmbed.tsx +58 -0
- package/src/index.ts +3 -1
- package/src/utils/getValidYoutubeUrl.ts +21 -0
- package/.idea/inspectionProfiles/Project_Default.xml +0 -15
|
@@ -0,0 +1,197 @@
|
|
|
1
|
+
<?xml version="1.0" encoding="UTF-8"?>
|
|
2
|
+
<project version="4">
|
|
3
|
+
<component name="ChangeListManager">
|
|
4
|
+
<list default="true" id="daade3cc-2214-4d1b-a6ad-012b8ae407bf" name="Changes" comment="CNTRL-486 - fixes">
|
|
5
|
+
<change beforePath="$PROJECT_DIR$/package.json" beforeDir="false" afterPath="$PROJECT_DIR$/package.json" afterDir="false" />
|
|
6
|
+
<change beforePath="$PROJECT_DIR$/src/index.ts" beforeDir="false" afterPath="$PROJECT_DIR$/src/index.ts" afterDir="false" />
|
|
7
|
+
</list>
|
|
8
|
+
<option name="SHOW_DIALOG" value="false" />
|
|
9
|
+
<option name="HIGHLIGHT_CONFLICTS" value="true" />
|
|
10
|
+
<option name="HIGHLIGHT_NON_ACTIVE_CHANGELIST" value="false" />
|
|
11
|
+
<option name="LAST_RESOLUTION" value="IGNORE" />
|
|
12
|
+
</component>
|
|
13
|
+
<component name="Git.Settings">
|
|
14
|
+
<option name="RECENT_BRANCH_BY_REPOSITORY">
|
|
15
|
+
<map>
|
|
16
|
+
<entry key="$PROJECT_DIR$" value="CNTRL-486_ability_to_add_youtube_videos" />
|
|
17
|
+
</map>
|
|
18
|
+
</option>
|
|
19
|
+
<option name="RECENT_GIT_ROOT_PATH" value="$PROJECT_DIR$" />
|
|
20
|
+
</component>
|
|
21
|
+
<component name="MarkdownSettingsMigration">
|
|
22
|
+
<option name="stateVersion" value="1" />
|
|
23
|
+
</component>
|
|
24
|
+
<component name="ProjectId" id="2H4nx2LrD2TTrbJMopYKifu02PK" />
|
|
25
|
+
<component name="ProjectViewState">
|
|
26
|
+
<option name="hideEmptyMiddlePackages" value="true" />
|
|
27
|
+
<option name="showLibraryContents" value="true" />
|
|
28
|
+
</component>
|
|
29
|
+
<component name="PropertiesComponent">{
|
|
30
|
+
"keyToString": {
|
|
31
|
+
"RunOnceActivity.OpenProjectViewOnStart": "true",
|
|
32
|
+
"RunOnceActivity.ShowReadmeOnStart": "true",
|
|
33
|
+
"WebServerToolWindowFactoryState": "false",
|
|
34
|
+
"last_opened_file_path": "/Users/admin/Documents/CNTRL/sdk-nextjs",
|
|
35
|
+
"nodejs_package_manager_path": "npm",
|
|
36
|
+
"ts.external.directory.path": "/Users/admin/Documents/CNTRL/sdk-nextjs/node_modules/typescript/lib",
|
|
37
|
+
"vue.rearranger.settings.migration": "true"
|
|
38
|
+
}
|
|
39
|
+
}</component>
|
|
40
|
+
<component name="SpellCheckerSettings" RuntimeDictionaries="0" Folders="0" CustomDictionaries="0" DefaultDictionary="application-level" UseSingleDictionary="true" transferred="true" />
|
|
41
|
+
<component name="TaskManager">
|
|
42
|
+
<task active="true" id="Default" summary="Default task">
|
|
43
|
+
<changelist id="daade3cc-2214-4d1b-a6ad-012b8ae407bf" name="Changes" comment="" />
|
|
44
|
+
<created>1667553465933</created>
|
|
45
|
+
<option name="number" value="Default" />
|
|
46
|
+
<option name="presentableId" value="Default" />
|
|
47
|
+
<updated>1667553465933</updated>
|
|
48
|
+
<workItem from="1667553467855" duration="59000" />
|
|
49
|
+
<workItem from="1667577252000" duration="8061000" />
|
|
50
|
+
<workItem from="1667926766782" duration="2182000" />
|
|
51
|
+
<workItem from="1668162212487" duration="28710000" />
|
|
52
|
+
<workItem from="1669397663981" duration="7439000" />
|
|
53
|
+
</task>
|
|
54
|
+
<task id="LOCAL-00001" summary="CNTRL-484 - added embed vimeo video">
|
|
55
|
+
<created>1667586762678</created>
|
|
56
|
+
<option name="number" value="00001" />
|
|
57
|
+
<option name="presentableId" value="LOCAL-00001" />
|
|
58
|
+
<option name="project" value="LOCAL" />
|
|
59
|
+
<updated>1667586762678</updated>
|
|
60
|
+
</task>
|
|
61
|
+
<task id="LOCAL-00002" summary="CNTRL-484 - problem fix">
|
|
62
|
+
<created>1667587045426</created>
|
|
63
|
+
<option name="number" value="00002" />
|
|
64
|
+
<option name="presentableId" value="LOCAL-00002" />
|
|
65
|
+
<option name="project" value="LOCAL" />
|
|
66
|
+
<updated>1667587045426</updated>
|
|
67
|
+
</task>
|
|
68
|
+
<task id="LOCAL-00003" summary="CNTRL-484 - version bump">
|
|
69
|
+
<created>1667587257510</created>
|
|
70
|
+
<option name="number" value="00003" />
|
|
71
|
+
<option name="presentableId" value="LOCAL-00003" />
|
|
72
|
+
<option name="project" value="LOCAL" />
|
|
73
|
+
<updated>1667587257510</updated>
|
|
74
|
+
</task>
|
|
75
|
+
<task id="LOCAL-00004" summary="CNTRL-486 - added youtube item">
|
|
76
|
+
<created>1668184730139</created>
|
|
77
|
+
<option name="number" value="00004" />
|
|
78
|
+
<option name="presentableId" value="LOCAL-00004" />
|
|
79
|
+
<option name="project" value="LOCAL" />
|
|
80
|
+
<updated>1668184730139</updated>
|
|
81
|
+
</task>
|
|
82
|
+
<task id="LOCAL-00005" summary="CNTRL-486 - added youtube type">
|
|
83
|
+
<created>1668185842201</created>
|
|
84
|
+
<option name="number" value="00005" />
|
|
85
|
+
<option name="presentableId" value="LOCAL-00005" />
|
|
86
|
+
<option name="project" value="LOCAL" />
|
|
87
|
+
<updated>1668185842201</updated>
|
|
88
|
+
</task>
|
|
89
|
+
<task id="LOCAL-00006" summary="CNTRL-486 - youtube fixes">
|
|
90
|
+
<created>1668193338566</created>
|
|
91
|
+
<option name="number" value="00006" />
|
|
92
|
+
<option name="presentableId" value="LOCAL-00006" />
|
|
93
|
+
<option name="project" value="LOCAL" />
|
|
94
|
+
<updated>1668193338566</updated>
|
|
95
|
+
</task>
|
|
96
|
+
<task id="LOCAL-00007" summary="CNTRL-486 - added mute to video when autoplay On">
|
|
97
|
+
<created>1668504184323</created>
|
|
98
|
+
<option name="number" value="00007" />
|
|
99
|
+
<option name="presentableId" value="LOCAL-00007" />
|
|
100
|
+
<option name="project" value="LOCAL" />
|
|
101
|
+
<updated>1668504184323</updated>
|
|
102
|
+
</task>
|
|
103
|
+
<task id="LOCAL-00008" summary="CNTRL-486 - added search params to Url">
|
|
104
|
+
<created>1668506131079</created>
|
|
105
|
+
<option name="number" value="00008" />
|
|
106
|
+
<option name="presentableId" value="LOCAL-00008" />
|
|
107
|
+
<option name="project" value="LOCAL" />
|
|
108
|
+
<updated>1668506131079</updated>
|
|
109
|
+
</task>
|
|
110
|
+
<task id="LOCAL-00009" summary="CNTRL-486 - version update">
|
|
111
|
+
<created>1668508864371</created>
|
|
112
|
+
<option name="number" value="00009" />
|
|
113
|
+
<option name="presentableId" value="LOCAL-00009" />
|
|
114
|
+
<option name="project" value="LOCAL" />
|
|
115
|
+
<updated>1668508864371</updated>
|
|
116
|
+
</task>
|
|
117
|
+
<task id="LOCAL-00010" summary="CNTRL-486 - version bump">
|
|
118
|
+
<created>1668509275485</created>
|
|
119
|
+
<option name="number" value="00010" />
|
|
120
|
+
<option name="presentableId" value="LOCAL-00010" />
|
|
121
|
+
<option name="project" value="LOCAL" />
|
|
122
|
+
<updated>1668509275485</updated>
|
|
123
|
+
</task>
|
|
124
|
+
<task id="LOCAL-00011" summary="CNTRL-486 - version bump">
|
|
125
|
+
<created>1668509525445</created>
|
|
126
|
+
<option name="number" value="00011" />
|
|
127
|
+
<option name="presentableId" value="LOCAL-00011" />
|
|
128
|
+
<option name="project" value="LOCAL" />
|
|
129
|
+
<updated>1668509525445</updated>
|
|
130
|
+
</task>
|
|
131
|
+
<task id="LOCAL-00012" summary="CNTRL-486 - fixes">
|
|
132
|
+
<created>1669397733023</created>
|
|
133
|
+
<option name="number" value="00012" />
|
|
134
|
+
<option name="presentableId" value="LOCAL-00012" />
|
|
135
|
+
<option name="project" value="LOCAL" />
|
|
136
|
+
<updated>1669397733023</updated>
|
|
137
|
+
</task>
|
|
138
|
+
<task id="LOCAL-00013" summary="CNTRL-486 - fixes">
|
|
139
|
+
<created>1669402876183</created>
|
|
140
|
+
<option name="number" value="00013" />
|
|
141
|
+
<option name="presentableId" value="LOCAL-00013" />
|
|
142
|
+
<option name="project" value="LOCAL" />
|
|
143
|
+
<updated>1669402876183</updated>
|
|
144
|
+
</task>
|
|
145
|
+
<task id="LOCAL-00014" summary="CNTRL-486 - fixes">
|
|
146
|
+
<created>1669402893251</created>
|
|
147
|
+
<option name="number" value="00014" />
|
|
148
|
+
<option name="presentableId" value="LOCAL-00014" />
|
|
149
|
+
<option name="project" value="LOCAL" />
|
|
150
|
+
<updated>1669402893251</updated>
|
|
151
|
+
</task>
|
|
152
|
+
<task id="LOCAL-00015" summary="CNTRL-486 - fixes">
|
|
153
|
+
<created>1669405389296</created>
|
|
154
|
+
<option name="number" value="00015" />
|
|
155
|
+
<option name="presentableId" value="LOCAL-00015" />
|
|
156
|
+
<option name="project" value="LOCAL" />
|
|
157
|
+
<updated>1669405389296</updated>
|
|
158
|
+
</task>
|
|
159
|
+
<task id="LOCAL-00016" summary="CNTRL-486 - fixes">
|
|
160
|
+
<created>1669405966077</created>
|
|
161
|
+
<option name="number" value="00016" />
|
|
162
|
+
<option name="presentableId" value="LOCAL-00016" />
|
|
163
|
+
<option name="project" value="LOCAL" />
|
|
164
|
+
<updated>1669405966077</updated>
|
|
165
|
+
</task>
|
|
166
|
+
<option name="localTasksCounter" value="17" />
|
|
167
|
+
<servers />
|
|
168
|
+
</component>
|
|
169
|
+
<component name="TypeScriptGeneratedFilesManager">
|
|
170
|
+
<option name="version" value="3" />
|
|
171
|
+
</component>
|
|
172
|
+
<component name="Vcs.Log.Tabs.Properties">
|
|
173
|
+
<option name="TAB_STATES">
|
|
174
|
+
<map>
|
|
175
|
+
<entry key="MAIN">
|
|
176
|
+
<value>
|
|
177
|
+
<State />
|
|
178
|
+
</value>
|
|
179
|
+
</entry>
|
|
180
|
+
</map>
|
|
181
|
+
</option>
|
|
182
|
+
</component>
|
|
183
|
+
<component name="VcsManagerConfiguration">
|
|
184
|
+
<MESSAGE value="CNTRL-484 - added embed vimeo video" />
|
|
185
|
+
<MESSAGE value="CNTRL-484 - problem fix" />
|
|
186
|
+
<MESSAGE value="CNTRL-484 - version bump" />
|
|
187
|
+
<MESSAGE value="CNTRL-486 - added youtube item" />
|
|
188
|
+
<MESSAGE value="CNTRL-486 - added youtube type" />
|
|
189
|
+
<MESSAGE value="CNTRL-486 - youtube fixes" />
|
|
190
|
+
<MESSAGE value="CNTRL-486 - added mute to video when autoplay On" />
|
|
191
|
+
<MESSAGE value="CNTRL-486 - added search params to Url" />
|
|
192
|
+
<MESSAGE value="CNTRL-486 - version update" />
|
|
193
|
+
<MESSAGE value="CNTRL-486 - version bump" />
|
|
194
|
+
<MESSAGE value="CNTRL-486 - fixes" />
|
|
195
|
+
<option name="LAST_COMMIT_MESSAGE" value="CNTRL-486 - fixes" />
|
|
196
|
+
</component>
|
|
197
|
+
</project>
|
|
Binary file
|
package/lib/components/Item.js
CHANGED
|
@@ -8,13 +8,14 @@ const ImageItem_1 = require("./items/ImageItem");
|
|
|
8
8
|
const VideoItem_1 = require("./items/VideoItem");
|
|
9
9
|
const RichTextItem_1 = require("./items/RichTextItem");
|
|
10
10
|
const VimeoEmbed_1 = require("./items/VimeoEmbed");
|
|
11
|
+
const YoutubeEmbed_1 = require("./items/YoutubeEmbed");
|
|
11
12
|
const CustomItem_1 = require("./items/CustomItem");
|
|
12
13
|
const itemsMap = {
|
|
13
14
|
[sdk_1.ArticleItemType.Rectangle]: RectangleItem_1.RectangleItem,
|
|
14
15
|
[sdk_1.ArticleItemType.Image]: ImageItem_1.ImageItem,
|
|
15
16
|
[sdk_1.ArticleItemType.Video]: VideoItem_1.VideoItem,
|
|
16
17
|
[sdk_1.ArticleItemType.RichText]: RichTextItem_1.RichTextItem,
|
|
17
|
-
[sdk_1.ArticleItemType.YoutubeEmbed]:
|
|
18
|
+
[sdk_1.ArticleItemType.YoutubeEmbed]: YoutubeEmbed_1.YoutubeEmbedItem,
|
|
18
19
|
[sdk_1.ArticleItemType.VimeoEmbed]: VimeoEmbed_1.VimeoEmbedItem,
|
|
19
20
|
[sdk_1.ArticleItemType.Custom]: CustomItem_1.CustomItem
|
|
20
21
|
};
|
|
@@ -2,8 +2,8 @@
|
|
|
2
2
|
Object.defineProperty(exports, "__esModule", { value: true });
|
|
3
3
|
exports.VimeoEmbedItem = void 0;
|
|
4
4
|
const jsx_runtime_1 = require("react/jsx-runtime");
|
|
5
|
-
const LinkWrapper_1 = require("../LinkWrapper");
|
|
6
5
|
const sdk_1 = require("@cntrl-site/sdk");
|
|
6
|
+
const LinkWrapper_1 = require("../LinkWrapper");
|
|
7
7
|
const VimeoEmbedItem = ({ item, layouts }) => {
|
|
8
8
|
const { autoplay, controls, loop, muted, pictureInPicture, url } = item.commonParams;
|
|
9
9
|
const getValidVimeoUrl = (url) => {
|
|
@@ -0,0 +1,42 @@
|
|
|
1
|
+
"use strict";
|
|
2
|
+
Object.defineProperty(exports, "__esModule", { value: true });
|
|
3
|
+
exports.YoutubeEmbedItem = void 0;
|
|
4
|
+
const jsx_runtime_1 = require("react/jsx-runtime");
|
|
5
|
+
const sdk_1 = require("@cntrl-site/sdk");
|
|
6
|
+
const LinkWrapper_1 = require("../LinkWrapper");
|
|
7
|
+
const getValidYoutubeUrl_1 = require("../../utils/getValidYoutubeUrl");
|
|
8
|
+
const YoutubeEmbedItem = ({ item, layouts }) => {
|
|
9
|
+
const { autoplay, controls, loop, url } = item.commonParams;
|
|
10
|
+
const getValidYoutubeUrl = (url) => {
|
|
11
|
+
const newUrl = new URL(url);
|
|
12
|
+
const id = (0, getValidYoutubeUrl_1.getYoutubeId)(newUrl);
|
|
13
|
+
const validUrl = new URL(`https://www.youtube.com/embed/${id}`);
|
|
14
|
+
validUrl.searchParams.append('controls', `${Number(controls)}`);
|
|
15
|
+
validUrl.searchParams.append('playlist', String(id));
|
|
16
|
+
validUrl.searchParams.append('loop', `${Number(loop)}`);
|
|
17
|
+
validUrl.searchParams.append('autoplay', `${Number(autoplay)}`);
|
|
18
|
+
validUrl.searchParams.append('mute', `${Number(autoplay)}`);
|
|
19
|
+
return validUrl.href;
|
|
20
|
+
};
|
|
21
|
+
const validUrl = getValidYoutubeUrl(url);
|
|
22
|
+
return ((0, jsx_runtime_1.jsxs)(LinkWrapper_1.LinkWrapper, { url: item.link?.url, children: [(0, jsx_runtime_1.jsx)("div", { className: `embed-youtube-video-wrapper-${item.id}`, children: (0, jsx_runtime_1.jsx)("iframe", { className: "embedYoutubeVideo", src: validUrl || '', allow: "accelerometer; autoplay; allowfullscreen;", allowFullScreen: true }) }), (0, jsx_runtime_1.jsx)("style", { jsx: true, children: `
|
|
23
|
+
${(0, sdk_1.getLayoutStyles)(layouts, [item.layoutParams], ([{ radius }]) => (`
|
|
24
|
+
.embed-youtube-video-wrapper-${item.id} {
|
|
25
|
+
position: absolute;
|
|
26
|
+
overflow: hidden;
|
|
27
|
+
width: 100%;
|
|
28
|
+
height: 100%;
|
|
29
|
+
top: 50%;
|
|
30
|
+
left: 50%;
|
|
31
|
+
transform: translate(-50%, -50%);
|
|
32
|
+
border-radius: ${radius * 100}vw;
|
|
33
|
+
}`))}
|
|
34
|
+
.embedYoutubeVideo {
|
|
35
|
+
width: 100%;
|
|
36
|
+
height: 100%;
|
|
37
|
+
z-index: 1;
|
|
38
|
+
border: none;
|
|
39
|
+
}
|
|
40
|
+
` })] }));
|
|
41
|
+
};
|
|
42
|
+
exports.YoutubeEmbedItem = YoutubeEmbedItem;
|
package/lib/index.js
CHANGED
|
@@ -14,11 +14,9 @@ var __exportStar = (this && this.__exportStar) || function(m, exports) {
|
|
|
14
14
|
for (var p in m) if (p !== "default" && !Object.prototype.hasOwnProperty.call(exports, p)) __createBinding(exports, m, p);
|
|
15
15
|
};
|
|
16
16
|
Object.defineProperty(exports, "__esModule", { value: true });
|
|
17
|
-
exports.CustomItems = exports.LayoutStyle = exports.VideoItem = exports.RichTextItem = exports.RectangleItem = exports.ImageItem = exports.Item = exports.Section = exports.Article = exports.Page = exports.RichTextConverter =
|
|
17
|
+
exports.CustomItems = exports.CntrlProvider = exports.YoutubeEmbedItem = exports.VimeoEmbedItem = exports.LayoutStyle = exports.VideoItem = exports.RichTextItem = exports.RectangleItem = exports.ImageItem = exports.Item = exports.Section = exports.Article = exports.Page = exports.RichTextConverter = void 0;
|
|
18
18
|
const defaultContext_1 = require("./provider/defaultContext");
|
|
19
19
|
__exportStar(require("@cntrl-site/sdk"), exports);
|
|
20
|
-
var CntrlProvider_1 = require("./provider/CntrlProvider");
|
|
21
|
-
Object.defineProperty(exports, "CntrlProvider", { enumerable: true, get: function () { return CntrlProvider_1.CntrlProvider; } });
|
|
22
20
|
var RichTextConverter_1 = require("./utils/RichTextConverter");
|
|
23
21
|
Object.defineProperty(exports, "RichTextConverter", { enumerable: true, get: function () { return RichTextConverter_1.RichTextConverter; } });
|
|
24
22
|
var Page_1 = require("./components/Page");
|
|
@@ -39,4 +37,11 @@ var VideoItem_1 = require("./components/items/VideoItem");
|
|
|
39
37
|
Object.defineProperty(exports, "VideoItem", { enumerable: true, get: function () { return VideoItem_1.VideoItem; } });
|
|
40
38
|
var LayoutStyle_1 = require("./components/LayoutStyle");
|
|
41
39
|
Object.defineProperty(exports, "LayoutStyle", { enumerable: true, get: function () { return LayoutStyle_1.LayoutStyle; } });
|
|
40
|
+
var VimeoEmbed_1 = require("./components/items/VimeoEmbed");
|
|
41
|
+
Object.defineProperty(exports, "VimeoEmbedItem", { enumerable: true, get: function () { return VimeoEmbed_1.VimeoEmbedItem; } });
|
|
42
|
+
var YoutubeEmbed_1 = require("./components/items/YoutubeEmbed");
|
|
43
|
+
Object.defineProperty(exports, "YoutubeEmbedItem", { enumerable: true, get: function () { return YoutubeEmbed_1.YoutubeEmbedItem; } });
|
|
44
|
+
// custom items
|
|
45
|
+
var CntrlProvider_1 = require("./provider/CntrlProvider");
|
|
46
|
+
Object.defineProperty(exports, "CntrlProvider", { enumerable: true, get: function () { return CntrlProvider_1.CntrlProvider; } });
|
|
42
47
|
exports.CustomItems = defaultContext_1.cntrlSdkContext.customItems;
|
|
@@ -0,0 +1,25 @@
|
|
|
1
|
+
"use strict";
|
|
2
|
+
Object.defineProperty(exports, "__esModule", { value: true });
|
|
3
|
+
exports.getYoutubeId = void 0;
|
|
4
|
+
var Allowed;
|
|
5
|
+
(function (Allowed) {
|
|
6
|
+
Allowed["Tiny"] = "youtu.be";
|
|
7
|
+
Allowed["Full"] = "www.youtube.com";
|
|
8
|
+
})(Allowed || (Allowed = {}));
|
|
9
|
+
function getYoutubeId({ hostname, pathname, search }) {
|
|
10
|
+
if (hostname !== Allowed.Full && hostname !== Allowed.Tiny) {
|
|
11
|
+
throw new Error(`Cannot get valid youtube ID from "${hostname}" - address is not whitelisted`);
|
|
12
|
+
}
|
|
13
|
+
switch (hostname) {
|
|
14
|
+
case Allowed.Tiny:
|
|
15
|
+
return pathname.replace('/', '');
|
|
16
|
+
case Allowed.Full:
|
|
17
|
+
const searchParams = new URLSearchParams(search);
|
|
18
|
+
const id = searchParams.get('v');
|
|
19
|
+
if (!id) {
|
|
20
|
+
throw new Error("Cannot get valid youtube ID from search params.");
|
|
21
|
+
}
|
|
22
|
+
return id;
|
|
23
|
+
}
|
|
24
|
+
}
|
|
25
|
+
exports.getYoutubeId = getYoutubeId;
|
package/package.json
CHANGED
package/src/components/Item.tsx
CHANGED
|
@@ -11,6 +11,7 @@ import { ImageItem } from './items/ImageItem';
|
|
|
11
11
|
import { VideoItem } from './items/VideoItem';
|
|
12
12
|
import { RichTextItem } from './items/RichTextItem';
|
|
13
13
|
import { VimeoEmbedItem } from './items/VimeoEmbed';
|
|
14
|
+
import { YoutubeEmbedItem } from './items/YoutubeEmbed';
|
|
14
15
|
import { CustomItem } from './items/CustomItem';
|
|
15
16
|
|
|
16
17
|
export interface ItemProps<I extends TArticleItemAny> {
|
|
@@ -23,7 +24,7 @@ const itemsMap: Record<ArticleItemType, ComponentType<ItemProps<any>>> = {
|
|
|
23
24
|
[ArticleItemType.Image]: ImageItem,
|
|
24
25
|
[ArticleItemType.Video]: VideoItem,
|
|
25
26
|
[ArticleItemType.RichText]: RichTextItem,
|
|
26
|
-
[ArticleItemType.YoutubeEmbed]:
|
|
27
|
+
[ArticleItemType.YoutubeEmbed]: YoutubeEmbedItem,
|
|
27
28
|
[ArticleItemType.VimeoEmbed]: VimeoEmbedItem,
|
|
28
29
|
[ArticleItemType.Custom]: CustomItem
|
|
29
30
|
};
|
|
@@ -1,9 +1,8 @@
|
|
|
1
1
|
import { FC } from 'react';
|
|
2
|
-
import {
|
|
2
|
+
import { getLayoutStyles } from '@cntrl-site/sdk';
|
|
3
3
|
import { TVimeoEmbedItem } from '@cntrl-site/core';
|
|
4
|
+
import { ItemProps } from '../Item';
|
|
4
5
|
import { LinkWrapper } from '../LinkWrapper';
|
|
5
|
-
import { getLayoutStyles } from '@cntrl-site/sdk';
|
|
6
|
-
|
|
7
6
|
|
|
8
7
|
export const VimeoEmbedItem: FC<ItemProps<TVimeoEmbedItem>> = ({ item, layouts }) => {
|
|
9
8
|
const { autoplay, controls, loop, muted, pictureInPicture, url } = item.commonParams;
|
|
@@ -0,0 +1,58 @@
|
|
|
1
|
+
import { FC } from 'react';
|
|
2
|
+
import { getLayoutStyles } from '@cntrl-site/sdk';
|
|
3
|
+
import { TYoutubeEmbedItem } from '@cntrl-site/core';
|
|
4
|
+
import { ItemProps } from '../Item';
|
|
5
|
+
import { LinkWrapper } from '../LinkWrapper';
|
|
6
|
+
import { getYoutubeId } from '../../utils/getValidYoutubeUrl';
|
|
7
|
+
|
|
8
|
+
export const YoutubeEmbedItem: FC<ItemProps<TYoutubeEmbedItem>> = ({ item, layouts }) => {
|
|
9
|
+
const { autoplay, controls, loop, url } = item.commonParams;
|
|
10
|
+
|
|
11
|
+
const getValidYoutubeUrl = (url: string): string => {
|
|
12
|
+
const newUrl = new URL(url);
|
|
13
|
+
const id = getYoutubeId(newUrl);
|
|
14
|
+
const validUrl = new URL(`https://www.youtube.com/embed/${id}`);
|
|
15
|
+
validUrl.searchParams.append('controls', `${ Number(controls) }`);
|
|
16
|
+
validUrl.searchParams.append('playlist', String(id));
|
|
17
|
+
validUrl.searchParams.append('loop', `${ Number(loop) }`);
|
|
18
|
+
validUrl.searchParams.append('autoplay', `${ Number(autoplay) }`);
|
|
19
|
+
validUrl.searchParams.append('mute', `${ Number(autoplay) }`);
|
|
20
|
+
|
|
21
|
+
return validUrl.href;
|
|
22
|
+
}
|
|
23
|
+
const validUrl = getValidYoutubeUrl(url);
|
|
24
|
+
|
|
25
|
+
return (
|
|
26
|
+
<LinkWrapper url={item.link?.url}>
|
|
27
|
+
<div className={`embed-youtube-video-wrapper-${item.id}`}>
|
|
28
|
+
<iframe
|
|
29
|
+
className="embedYoutubeVideo"
|
|
30
|
+
src={validUrl || ''}
|
|
31
|
+
allow="accelerometer; autoplay; allowfullscreen;"
|
|
32
|
+
allowFullScreen
|
|
33
|
+
/>
|
|
34
|
+
</div>
|
|
35
|
+
<style jsx>{`
|
|
36
|
+
${getLayoutStyles(layouts, [item.layoutParams], ([{ radius }]) => (`
|
|
37
|
+
.embed-youtube-video-wrapper-${item.id} {
|
|
38
|
+
position: absolute;
|
|
39
|
+
overflow: hidden;
|
|
40
|
+
width: 100%;
|
|
41
|
+
height: 100%;
|
|
42
|
+
top: 50%;
|
|
43
|
+
left: 50%;
|
|
44
|
+
transform: translate(-50%, -50%);
|
|
45
|
+
border-radius: ${radius * 100}vw;
|
|
46
|
+
}`
|
|
47
|
+
))}
|
|
48
|
+
.embedYoutubeVideo {
|
|
49
|
+
width: 100%;
|
|
50
|
+
height: 100%;
|
|
51
|
+
z-index: 1;
|
|
52
|
+
border: none;
|
|
53
|
+
}
|
|
54
|
+
`}</style>
|
|
55
|
+
</LinkWrapper>
|
|
56
|
+
)
|
|
57
|
+
};
|
|
58
|
+
|
package/src/index.ts
CHANGED
|
@@ -1,7 +1,6 @@
|
|
|
1
1
|
import { cntrlSdkContext } from './provider/defaultContext';
|
|
2
2
|
|
|
3
3
|
export * from '@cntrl-site/sdk';
|
|
4
|
-
export { CntrlProvider } from './provider/CntrlProvider';
|
|
5
4
|
|
|
6
5
|
export { RichTextConverter } from './utils/RichTextConverter';
|
|
7
6
|
export { Page } from './components/Page';
|
|
@@ -13,7 +12,10 @@ export { RectangleItem } from './components/items/RectangleItem';
|
|
|
13
12
|
export { RichTextItem } from './components/items/RichTextItem';
|
|
14
13
|
export { VideoItem } from './components/items/VideoItem';
|
|
15
14
|
export { LayoutStyle } from './components/LayoutStyle';
|
|
15
|
+
export { VimeoEmbedItem } from './components/items/VimeoEmbed';
|
|
16
|
+
export { YoutubeEmbedItem } from './components/items/YoutubeEmbed';
|
|
16
17
|
|
|
17
18
|
// custom items
|
|
19
|
+
export { CntrlProvider } from './provider/CntrlProvider';
|
|
18
20
|
export type { CustomItemComponent } from './provider/CustomItemTypes';
|
|
19
21
|
export const CustomItems = cntrlSdkContext.customItems;
|
|
@@ -0,0 +1,21 @@
|
|
|
1
|
+
enum Allowed {
|
|
2
|
+
Tiny = 'youtu.be',
|
|
3
|
+
Full = 'www.youtube.com'
|
|
4
|
+
}
|
|
5
|
+
|
|
6
|
+
export function getYoutubeId({ hostname, pathname, search }: URL): string {
|
|
7
|
+
if (hostname !== Allowed.Full && hostname !== Allowed.Tiny) {
|
|
8
|
+
throw new Error(`Cannot get valid youtube ID from "${hostname}" - address is not whitelisted`);
|
|
9
|
+
}
|
|
10
|
+
switch (hostname) {
|
|
11
|
+
case Allowed.Tiny:
|
|
12
|
+
return pathname.replace('/', '');
|
|
13
|
+
case Allowed.Full:
|
|
14
|
+
const searchParams = new URLSearchParams(search);
|
|
15
|
+
const id = searchParams.get('v');
|
|
16
|
+
if (!id) {
|
|
17
|
+
throw new Error("Cannot get valid youtube ID from search params.");
|
|
18
|
+
}
|
|
19
|
+
return id;
|
|
20
|
+
}
|
|
21
|
+
}
|
|
@@ -1,15 +0,0 @@
|
|
|
1
|
-
<component name="InspectionProjectProfileManager">
|
|
2
|
-
<profile version="1.0">
|
|
3
|
-
<option name="myName" value="Project Default" />
|
|
4
|
-
<inspection_tool class="HtmlUnknownAttribute" enabled="true" level="WARNING" enabled_by_default="true">
|
|
5
|
-
<option name="myValues">
|
|
6
|
-
<value>
|
|
7
|
-
<list size="1">
|
|
8
|
-
<item index="0" class="java.lang.String" itemvalue="jsx" />
|
|
9
|
-
</list>
|
|
10
|
-
</value>
|
|
11
|
-
</option>
|
|
12
|
-
<option name="myCustomValuesEnabled" value="true" />
|
|
13
|
-
</inspection_tool>
|
|
14
|
-
</profile>
|
|
15
|
-
</component>
|