Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

add local video support #152

Merged
merged 1 commit into from
Feb 5, 2024
Merged

add local video support #152

merged 1 commit into from
Feb 5, 2024

Conversation

cloverich
Copy link
Owner

@cloverich cloverich commented Feb 5, 2024

  • support drag and dropping local video files. Video files are uploaded then displayed inline
  • parse and serialize video elements in markdown using image syntax

Video files are stored in markdown as images: ![my cool video](my-cool-video.mov). When parsing (markdown -> mdast -> slate), the markdown parser checks image tags for extensions, and when found, creates a video Slate node instead of an image node:

{
  type: 'video'
  url: 'chronicles://my-cool-video.mov'
  // ...
}

To render, the added VideoElement is included into the Plate components list; the implementation is naive. (On second pass, I added Captioning and media toolbar for delete).

Screenshot 2024-02-05 at 8 43 57 AM

Closes #54

@@ -88,4 +88,23 @@ export class FilesClient {
});
});
};

uploadFile = async (file: File): Promise<UploadResponse> => {
Copy link
Owner Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Worth comparing to the upload = async (dataUrl: string): Promise<UploadResponse> implementation above; I had to implement the above one like that because Plate's createImagePlugin reads the dropped file as a dataUrl before handing off.

By comparison, (as I learned) you can directly hand off an ArrayBuffer (I believe) from the dropped file and stream it to the filesystem. This saves the need to read the file into memory again as a dataUrl, and then to encode it from dataUrl back to binary. Probably not super noticeable performance wise, but its notable because the implementation is actually simpler in addition to being more performant; I think generic file handling could probably merge all the plugins together and go through this method.

});
} else {
// If it's not a video, delegate to the next plugin.
insertData(dataTransfer);
Copy link
Owner Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Notably, plates createImagePlugin doesn't do this, I'm not sure the reason. But the effect is, if this plugin comes before it, this routine will never be called, and dropping a video file will silently fail.

Copy link
Owner Author

@cloverich cloverich left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Will do:

  • Remove MediaEmbed (unused, thought it was already here)
  • Comment on slate node structure
  • Re-name slateInternal
  • Add caption / delete dropdown to video (if its free, like images)

- support drag and dropping local video files. Video files are uploaded then displayed inline
- parse and serialize video elements in markdown using image syntax
@cloverich cloverich merged commit de06eb6 into master Feb 5, 2024
1 check passed
@cloverich cloverich deleted the video branch February 5, 2024 16:47
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

Successfully merging this pull request may close these issues.

Add support for Video
1 participant