Fix: Use the File URI scheme instead of the direct path

README.md

@@ -1,4 +1,4 @@
-# Joplin plugin media properties
+# Joplin media properties plugin
 
 Collection of Joplin features that improve quality of life.
 
@@ -18,7 +18,7 @@ Allows the use of attachments as a source in HTML \<video\> tags
 
 1. Download the plugin release.
 
-2. Navigate to Help > Open profile direcotry.
+2. Navigate to Help > Open profile directory.
 
 3. Extract the downloaded file and place it inside the plugins folder.
 

package.json

@@ -1,6 +1,6 @@
 {
  "name": "joplin-plugin-media-properties",
- "version": "1.0.0",
+ "version": "1.0.1",
  "scripts": {
  "dist": "webpack --env joplin-plugin-config=buildMain && webpack --env joplin-plugin-config=buildExtraScripts && webpack --env joplin-plugin-config=createArchive",
  "prepare": "npm run dist",
@@ -9,7 +9,10 @@
  },
  "license": "MIT",
  "keywords": [
- "joplin-plugin"
+ "joplin-plugin",
+ "media",
+ "video",
+ "resize"
  ],
  "files": [
  "publish"

src/index.ts

@@ -1,6 +1,39 @@
 import joplin from 'api';
 import { ContentScriptType } from 'api/types';
-//import { Message } from "./types";
+
+
+async function storeResourcesInLocalStorage() {
+ async function updateResources() {
+ const note = await joplin.workspace.selectedNote();
+
+ if (note) {
+ const resources = {}
+ for (const item of note.body.matchAll(/:\/([A-Za-z0-9]{32})/gi)) {
+ const resourceId = item[1]
+ if (!resourceId) continue;
+ if (resourceId in resources) continue;
+ const resourcePath = await joplin.data.resourcePath(resourceId)
+ if (!resourcePath) continue;
+ resources[resourceId] = resourcePath;
+ }
+
+ localStorage.setItem('resources', JSON.stringify(resources))
+ }
+ }
+
+ // This event will be triggered when the user selects a different note
+ await joplin.workspace.onNoteSelectionChange(() => {
+ updateResources();
+ });
+
+ // This event will be triggered when the content of the note changes
+ await joplin.workspace.onNoteChange(() => {
+ updateResources();
+ });
+
+ // Update when the plugin starts
+ updateResources();
+}
 
 
 
@@ -13,52 +46,6 @@ joplin.plugins.register({
  './videoSrcAttachmentCS.js',
  );
 
- /**
- * Does not work with tinymce
- */
- // await joplin.contentScripts.onMessage(
- // contentScriptId,
- // async (message: Message) => {
- // if (message.type === 'getResource') {
- // const resourcePath = await joplin.data.resourcePath(message.value).catch(() => undefined);
- // if (!resourcePath) return;
- // return {
- // "path": resourcePath
- // };
- // }
- // },
- // );
-
- async function updateResources() {
- const note = await joplin.workspace.selectedNote();
-
- if (note) {
- const resources = {}
- for (const item of note.body.matchAll(/:\/([A-Za-z0-9]{32})/gi)) {
- const resourceId = item[1]
- if (!resourceId) continue;
- if (resourceId in resources) continue;
- const resourcePath = await joplin.data.resourcePath(resourceId)
- if (!resourcePath) continue;
- resources[resourceId] = resourcePath;
- }
-
- localStorage.setItem('resources', JSON.stringify(resources))
- }
- }
-
- // This event will be triggered when the user selects a different note
- await joplin.workspace.onNoteSelectionChange(() => {
- updateResources();
- });
-
- // This event will be triggered when the content of the note changes
- await joplin.workspace.onNoteChange(() => {
- updateResources();
- });
-
- // Update when the plugin starts
- updateResources();
-
+ await storeResourcesInLocalStorage()
  },
 });

src/manifest.json

@@ -2,9 +2,9 @@
  "manifest_version": 1,
  "id": "plugin.ltscreed.joplin-media-properties",
  "app_min_version": "2.13",
- "version": "1.0.0",
+ "version": "1.0.1",
  "name": "Joplin media properties",
- "description": "Collection of Joplin features that improve quality of lif",
+ "description": "Collection of Joplin features that improve quality of life",
  "author": "LTsCreed",
  "homepage_url": "https://github.com/LTsCreed/joplin-media-properties",
  "repository_url": "https://github.com/LTsCreed/joplin-media-properties",

src/videoSrcAttachmentCS.ts

@@ -19,24 +19,8 @@ function renderVideoHtml(before, src, after, contentScriptId, pluginOptions) {
  const resourcePath = resources?.[resourceId]
  if (!resourcePath) return;
 
- return `<video${before}src="${resourcePath}"${after}>`
+ return `<video${before}src="file://${resourcePath}"${after}>`
 
- /**
- * Does not work with tinymce
- */
- // const postMessageWithResponse = `
- // if (this.hasAttribute('data-loaded')) return;
- // this.setAttribute('data-loaded', true);
- // const el = this;
-
- // webviewApi.postMessage('${contentScriptId}', { type: 'getResource', value: '${resourceId}'}).then(function(response) {
- // if (!response) return;
- // el.src = response.path;
- // });
- // return;
- // `;
-
- // return `<video${before}src="${src}"${after} onloadstart="${postMessageWithResponse.replace(/\n/g, ' ')}">`
 }
 
 export default (context: { contentScriptId: string, postMessage: any } ) => {
@@ -62,7 +46,6 @@ export default (context: { contentScriptId: string, postMessage: any } ) => {
  });
  }
 
-
  },
  };
 };