Add video file preview #314
Conversation
| // @ts-expect-error no types provided | ||
| import underline from 'markdown-it-underline'; | ||
| import highlight from 'markdown-it-highlightjs'; | ||
| //import html5Media from 'markdown-it-html5-media'; // Doesn't work, always not found |
There was a problem hiding this comment.
This does not work, always not finding the file, even though its there in node_modules folder.
| <h4>Preview</h4> | ||
| <div class="preview"> | ||
| <img v-if="(resource.metadata?.filetype as string)?.startsWith('image/')" :src="resourceURL(resource)" alt="Preview" /> | ||
| <img v-if="isImageFile(mimeType)" :src="resourceURL(resource)" alt="Preview" /> |
There was a problem hiding this comment.
Unified with how we do it in preview.vue, we already have a helper function to check if its an image file
Note this is also missing preview for PDF files, even though on the preview page we support it.
Its also a bit weird that we have basically the same preview functionality twice?
I don't know why we have a preview on the property edit page, can probably get rid of it?
Smaug6739
left a comment
Smaug6739
left a comment
There was a problem hiding this comment.
We should remove markdown-it-html5-media from dependencies if it's not used
|
I would once its fully working. Either my code needs to be fixed, or the import for that package needs to be done correctly. |
2 participants
File preview supported images and pdf, but not video. HTML5
Problem:
Markdown video preview has multiple issues.
My MarkdownIt handling is a total hack.
I tried to add https://www.npmjs.com/package/markdown-it-html5-media
Installed via npm or/and bun, its in bun.lock and package json files. But still
Failed to resolve import "markdown-it-html5-media" from "app/helpers/markdown/index.ts".I don't know what I'm doing wrong, and I don't know how to fix it.
Maybe because that module has no index.js??
I reduced the code of the markdown plugin, and put it directly into index.ts. Which mostly works.
And tbh I also prefer that over adding another NPM package. The code in index.ts is just quickly hacked together, I can optimize that down quite a bit more, we don't need to copy their code (which is probably licensing issue) and get it smaller. Probably also move it out into separate file.
But need to solve why it only works in Markdown Preview, and not in final document view?
As a note, personally I would also like to have https://github.com/CenterForOpenScience/markdown-it-video
I often have YouTube videos in my notes, having them embed would be great. But that is a separate feature from what I'm doing in this PR.