use oembed-parse to get the iframe from the source (Youtube, Soundcloud etc) WIP (#34)

* feat(oembed): use oembed parse to get the iframe

* test(oembed): add test to getIframe

* feat(oembed): compute aspect ratio

* feat(input): add contextual menu

* feat(readme): update doc

* feat(version): bump to 0.4.0

Author: FHachez

README.md

@@ -1,23 +1,29 @@
 # Obsidian Plugin: Convert a URL (e.g. YouTube) into an iframe (preview)
-**Transform a YouTube URL into a YouTube preview.**
+**Transform any URL into a preview.**
 
-![Demo](images/demo-url-to-preview-3.gif)
+![Demo](images/demo-url-to-preview-0.4.0.gif)
 
-Transform a selected URL to an embed view if the website allows it. It offers the possibilitiy to resize the preview.
+1. Select an url 
+2. right click on it (or use the command `Convert to Url Preview`)
+3. Click on `Url to Preview/Iframe`.
+![contextual menu](images/contextual-menu.png)
 
-The default hotkey is `cmd + shift + i`.
+
+The default hotkey is `cmd + alt + i`.
 
 
 # Installation
 Support for 3rd party plugins is enabled in settings (Obsidian > Settings > Third Party plugin > Safe mode - OFF)
 To install this plugin, download zip archive from GitHub releases page. Extract the archive into <vault>/.obsidian/plugins.
 
-# Future improvement
-- Find a way to detect when the website doesn't allow cross origins.
-- Support more websites.
-
 # Change log
 
+## 0.4.0
+- Instead of doing a custom mapping to embed for YouTube, we now rely on the OEmbed standard. Thanks to https://www.npmjs.com/package/oembed-parser 
+    - This allows to preserve the timestamp on Youtube and to get default size for many websites.
+- Add contextual menu (right click on a link) ![contextual menu](images/contextual-menu.png)
+
+
 ## 0.3.0
 - Simplify the output when using a recent Obsidian download, by leveraging `aspect-ratio` css.
 

images/contextual-menu.png

@@ -1,7 +1,7 @@
 {
   "id": "convert-url-to-iframe",
   "name": "Convert url to preview (iframe)",
-  "version": "0.3.0",
+  "version": "0.4.0",
   "description": "Convert an url (ex, youtube) into an iframe (preview)",
   "author": "Hachez Floran",
   "authorUrl": "https://github.com/FHachez",

images/demo-url-to-preview-0.4.0.gif

@@ -1,6 +1,6 @@
 {
   "name": "obsidian-convert-url-to-iframe",
-  "version": "0.3.0",
+  "version": "0.4.0",
   "description": "Convert an url (ex, youtube) into an iframe (preview)",
   "main": "main.js",
   "scripts": {
@@ -12,6 +12,8 @@
   "author": "",
   "license": "MIT",
   "devDependencies": {
+    "@types/dompurify": "^2.3.2",
+    "@types/jsdom": "^16.2.14",
     "@types/node": "^14.14.2",
     "@typescript-eslint/eslint-plugin": "^5.2.0",
     "@typescript-eslint/parser": "^5.2.0",
@@ -25,5 +27,9 @@
     "ts-jest": "^26.4.3",
     "tslib": "^2.0.3",
     "typescript": "^4.1.0"
+  },
+  "dependencies": {
+    "dompurify": "^2.3.4",
+    "oembed-parser": "^2.0.0"
   }
 }

images/demo-url-to-preview-3.gif

@@ -1,6 +1,6 @@
 import { defaultHeight } from "src/constant";
 import { AspectRatioType } from "src/types/aspect-ratio";
-import { swapRatio } from "src/utils/ratio_swapper";
+import { addAspectRatio, swapRatio } from "src/utils/ratio.utils";
 
 export interface IResizableIframeContainerOutput {
     iframeContainer: HTMLElement,
@@ -10,18 +10,20 @@ export interface IResizableIframeContainerOutput {
 }
 
 
-export function createIframeContainerEl(contentEl: HTMLElement, url: string): IResizableIframeContainerOutput{
+export function createIframeContainerEl(contentEl: HTMLElement, iframeHtml: string): IResizableIframeContainerOutput{
 	// Container to keep a min height for the iframe to keep the content visible
 	const iframeContainer = contentEl.createEl('div');
 	iframeContainer.className = "iframe__container space-y"
 
 	// Inline styling to make sure that the created iframe will keep the style even without the plugin
-	const iframe = iframeContainer.createEl('iframe');
-	iframe.src = url;
-	iframe.allow = "fullscreen"
-	iframe.style.height = '100%';
-	iframe.style.width = '100%';
-	iframe.style.setProperty('aspect-ratio', '16/9');
+	const fragment = document.createElement('template');
+	fragment.innerHTML = iframeHtml;
+
+	const  iframe = fragment.content.firstChild as HTMLIFrameElement;
+	iframeContainer.appendChild(iframe);
+
+	console.log(iframe.outerHTML)
+	addAspectRatio(iframe);
 
     const resetToDefaultWidth= () => {
             iframe.style.width = '100%';
@@ -30,6 +32,7 @@ export function createIframeContainerEl(contentEl: HTMLElement, url: string): IR
 
 	resetToDefaultWidth();
 
+	console.log(iframeHtml, iframe)
 
 	return {
         iframeContainer,
@@ -108,4 +111,4 @@ export function createIframeContainerElLegacy(contentEl: HTMLElement, url: strin
             iframeContainer.style.height = ratioContainer.offsetHeight + 'px';
         },
 	};
-}
+}

manifest.json

@@ -6,12 +6,12 @@ import { doesSupportAspectRatio } from './constant';
 
 
 export class ConfigureIframeModal extends Modal {
-	url: string;
+	iframeHtml: string;
 	editor: any;
 
-	constructor(app: App, url: string, editor: any) {
+	constructor(app: App, iframeHtml: string, editor: any) {
 		super(app);
-		this.url = url;
+		this.iframeHtml = iframeHtml;
 		this.editor = editor;
 
 		// Allow the modal to grow in width
@@ -33,7 +33,7 @@ export class ConfigureIframeModal extends Modal {
 
 		// Electron < 12 doesn't support the aspect ratio. We need to use a fancy div container with a padding bottom
 		const { iframeContainer, outputHtml, resetToDefaultWidth, updateAspectRatio } = doesSupportAspectRatio ?
-			createIframeContainerEl(contentEl, this.url) : createIframeContainerElLegacy(contentEl, this.url);
+			createIframeContainerEl(contentEl, this.iframeHtml) : createIframeContainerElLegacy(contentEl, this.iframeHtml);
 		const widthCheckbox = createShouldUseDefaultWidthButton(container, resetToDefaultWidth);
 		const aspectRatioInput = createAspectRatioInput(container ,updateAspectRatio);
 

package-lock.json

@@ -9,4 +9,4 @@ declare namespace process {
 export const defaultHeight = "100px"
 
 const electronMajorVersion = process.versions?.electron?.split('.')[0]
-export const doesSupportAspectRatio = +(electronMajorVersion) >= 12;
+export const doesSupportAspectRatio = +(electronMajorVersion) >= 12;