From 4f017aa6719c36e6e6f8424d1cc5e3a5637f3f55 Mon Sep 17 00:00:00 2001
From: Andrew Simachev <andrew.simachev@gmail.com>
Date: Wed, 8 Nov 2023 13:31:33 +0100
Subject: [PATCH] JS-3320: embed option on pastee

---
 electron.js                      |  2 +-
 src/ts/component/editor/page.tsx | 66 +++++++++++++++++++++++++++++---
 src/ts/lib/index.ts              |  2 +
 src/ts/lib/util/embed.ts         | 20 ++++++++++
 4 files changed, 83 insertions(+), 7 deletions(-)
 create mode 100644 src/ts/lib/util/embed.ts

diff --git a/electron.js b/electron.js
index 15ca1ac9e4..e5a36e0b77 100644
--- a/electron.js
+++ b/electron.js
@@ -27,7 +27,7 @@ const csp = [
 	`media-src 'self' http://*:* https://*:* data: blob: file://* https://*.googlevideo.com`,
 	`style-src 'unsafe-inline' http://localhost:* file://* https://*.youtube.com/ https://*.vimeocdn.com`,
 	`font-src data: file://* http://localhost:* https://*.youtube.com/ https://*.vimeocdn.com`,
-	`connect-src file://* http://localhost:* http://127.0.0.1:* ws://localhost:* https://*.anytype.io https://api.amplitude.com/ devtools://devtools data: https://*.youtube.com/ https://*.vimeocdn.com/ https://*.vimeo.com/ https://*.googlevideo.com`,
+	`connect-src file://* http://localhost:* http://127.0.0.1:* ws://localhost:* https://*.anytype.io https://api.amplitude.com/ devtools://devtools data: https://*.youtube.com/ https://*.vimeocdn.com/ https://*.vimeo.com/ https://*.googlevideo.com 'https://*.akamaized.net`,
 	`script-src-elem file: http://localhost:* https://sentry.io devtools://devtools 'unsafe-inline' https://*.youtube.com/ https://*.vimeocdn.com https://*.gstatic.com/`,
 	`frame-src chrome-extension://react-developer-tools http://localhost:*/embed/iframe.html https://*.youtube.com/ https://*.vimeo.com/`,
 	`worker-src 'self' 'unsafe-eval' blob: http://localhost:*`,
diff --git a/src/ts/component/editor/page.tsx b/src/ts/component/editor/page.tsx
index 4f288440a9..30f4264172 100644
--- a/src/ts/component/editor/page.tsx
+++ b/src/ts/component/editor/page.tsx
@@ -5,7 +5,7 @@ import { observer } from 'mobx-react';
 import { throttle } from 'lodash';
 import { Block, Icon, Loader, Deleted, DropTarget } from 'Component';
 import { commonStore, blockStore, detailStore, menuStore, popupStore } from 'Store';
-import { I, C, Key, UtilCommon, UtilData, UtilObject, Preview, Mark, focus, keyboard, Storage, UtilRouter, Action, translate, analytics, Renderer, sidebar } from 'Lib';
+import { I, C, Key, UtilCommon, UtilData, UtilObject, UtilEmbed, Preview, Mark, focus, keyboard, Storage, UtilRouter, Action, translate, analytics, Renderer, sidebar } from 'Lib';
 import Controls from 'Component/page/head/controls';
 import PageHeadEdit from 'Component/page/head/edit';
 import Constant from 'json/constant.json';
@@ -1727,9 +1727,28 @@ const EditorPage = observer(class EditorPage extends React.Component<Props, Stat
 			isEmpty && !isInsideTable ? { id: 'object', name: translate('editorPageCreateBookmarkObject') } : null,
 			!isInsideTable ? { id: 'block', name: translate('editorPageCreateBookmark') } : null,
 			{ id: 'cancel', name: translate('editorPagePasteText') },
-			//{ id: 'embed', name: translate('editorPagePasteEmbed') },
 		].filter(it => it);
 
+		const embed = url.match(/(youtube.com|youtu.be|vimeo.com)/gi);
+
+		let processor = null;
+		if (embed) {
+			switch (embed[0]) {
+				case 'youtu.be':
+				case 'youtube.com': {
+					processor = I.EmbedProcessor.Youtube;
+					break;
+				};
+
+				case 'vimeo.com': {
+					processor = I.EmbedProcessor.Vimeo;
+					break;
+				}
+			};
+
+			options.push({ id: 'embed', name: translate('editorPagePasteEmbed') });
+		};
+
 		menuStore.open('select', { 
 			element: `#block-${focused}`,
 			offsetX: Constant.size.blockMenu,
@@ -1747,10 +1766,11 @@ const EditorPage = observer(class EditorPage extends React.Component<Props, Stat
 				onSelect: (event: any, item: any) => {
 					let value = block.content.text;
 					let to = 0;
+
 					const marks = UtilCommon.objectCopy(block.content.marks || []);
 
 					switch (item.id) {
-						case 'link':
+						case 'link': {
 							if (currentFrom == currentTo) {
 								value = UtilCommon.stringInsert(value, url + ' ', currentFrom, currentFrom);
 								to = currentFrom + url.length;
@@ -1769,8 +1789,9 @@ const EditorPage = observer(class EditorPage extends React.Component<Props, Stat
 								focus.apply();
 							});
 							break;
+						};
 
-						case 'object':
+						case 'object': {
 							C.ObjectToBookmark(rootId, url, (message: any) => {
 								if (message.error.code) {
 									return;
@@ -1786,16 +1807,18 @@ const EditorPage = observer(class EditorPage extends React.Component<Props, Stat
 								});
 							});
 							break;
+						};
 
-						case 'block':
+						case 'block': {
 							C.BlockBookmarkCreateAndFetch(rootId, focused, length ? I.BlockPosition.Bottom : I.BlockPosition.Replace, url, (message: any) => {
 								if (!message.error.code) {
 									analytics.event('CreateBlock', { middleTime: message.middleTime, type: I.BlockType.Bookmark });
 								};
 							});
 							break;
+						};
 
-						case 'cancel':
+						case 'cancel': {
 							value = UtilCommon.stringInsert(block.content.text, url + ' ', currentFrom, currentFrom);
 							to = currentFrom + url.length;
 
@@ -1804,6 +1827,37 @@ const EditorPage = observer(class EditorPage extends React.Component<Props, Stat
 								focus.apply();
 							});
 							break;
+						};
+
+						case 'embed': {
+							if (processor === null) {
+								break;
+							};
+
+							switch (processor) {
+								case I.EmbedProcessor.Youtube: {
+									url = url.replace(/\/watch\/?\??/, '/embed/');
+									url = url.replace('v=', '');
+									break;
+								};
+
+								case I.EmbedProcessor.Vimeo: {
+									const a = new URL(url);
+									url = `https://player.vimeo.com/video${a.pathname}`;
+									break;
+								};
+							};
+
+							this.blockCreate(block.id, I.BlockPosition.Bottom, { 
+								type: I.BlockType.Embed,
+								content: {
+									processor,
+									text: UtilEmbed.getHtml(processor, url),
+								}
+							});
+							break;
+						};
+
 					};
 				},
 			}
diff --git a/src/ts/lib/index.ts b/src/ts/lib/index.ts
index 5beeb4d35e..d11d8fd4dc 100644
--- a/src/ts/lib/index.ts
+++ b/src/ts/lib/index.ts
@@ -15,6 +15,7 @@ import UtilObject from './util/object';
 import UtilMenu from './util/menu';
 import UtilRouter from './util/router';
 import UtilDate from './util/date';
+import UtilEmbed from './util/embed';
 
 import { keyboard, Key } from './keyboard';
 import { sidebar } from './sidebar';
@@ -96,4 +97,5 @@ export {
 	UtilMenu,
 	UtilRouter,
 	UtilDate,
+	UtilEmbed,
 };
\ No newline at end of file
diff --git a/src/ts/lib/util/embed.ts b/src/ts/lib/util/embed.ts
new file mode 100644
index 0000000000..32a13552e9
--- /dev/null
+++ b/src/ts/lib/util/embed.ts
@@ -0,0 +1,20 @@
+import { I, UtilCommon } from 'Lib';
+
+class UtilEmbed {
+
+	getHtml (processor: I.EmbedProcessor, content: any): string {
+		const fn = UtilCommon.toCamelCase(`get-${I.EmbedProcessor[processor]}-html`)
+		return this[fn] ? this[fn](content) : '';
+	};
+
+	getYoutubeHtml (content: string): string {
+		return `<iframe width="560" height="315" src="${content}" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" allowfullscreen></iframe>`;
+	};
+
+	getVimeoHtml (content: string): string {
+		return `<iframe src="${content}" width="640" height="360" frameborder="0" allow="autoplay; fullscreen; picture-in-picture" allowfullscreen></iframe>`;
+	};
+
+};
+
+export default new UtilEmbed();
\ No newline at end of file