adds dynamic loading to video-test #698
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,89 @@ | ||
| import {NextApiRequest, NextApiResponse} from 'next' | ||
| import mdx from '@mdx-js/mdx' | ||
| import VFile from 'vfile' | ||
| import visit from 'unist-util-visit' | ||
| import fetch from 'isomorphic-fetch' | ||
| import toMarkdown from 'mdast-util-to-markdown' | ||
|
|
||
| const loadGithubNotes = async (req: NextApiRequest, res: NextApiResponse) => { | ||
| if (req.method === 'GET' && req.query.url) { | ||
| const test = await loadNotesFromUrl(req.query.url as string) | ||
|
|
||
| res.status(200).json(test) | ||
| } else { | ||
| res.status(200).end() | ||
| } | ||
| } | ||
|
|
||
| export default loadGithubNotes | ||
|
|
||
| export async function loadNotesFromUrl(url: string) { | ||
|
There was a problem hiding this comment. this loads mdx from a url and parses it looking for timestamp components which creates JS objects that are used to make a webvtt. it's currently very fragile! works though |
||
| const result = await fetch(url) | ||
|
|
||
| const text = await result.text() | ||
|
|
||
| // @ts-ignore | ||
| const file = new VFile(text.trimStart()) | ||
|
|
||
| function extractNotes() { | ||
| return function transformer(tree: any, file: any) { | ||
| file.data.notes = [] | ||
| visit(tree, 'mdxJsxFlowElement', function visitor(node) { | ||
| file.data.notes.push(node) | ||
| }) | ||
| // remove(tree, 'mdxJsxFlowElement') | ||
| } | ||
| } | ||
|
|
||
| // @ts-ignore | ||
| const mdxCompiler = mdx.createCompiler({ | ||
| remarkPlugins: [extractNotes], | ||
| }) | ||
|
|
||
| return mdxCompiler.process(file).then((file: any) => { | ||
| function convertHMS(timeString: string) { | ||
| let seconds = 0 | ||
|
|
||
| const arr = timeString.split(':') | ||
|
|
||
| if (arr.length === 3) { | ||
| seconds = Number(arr[0]) * 3600 + Number(arr[1]) * 60 + +Number(arr[2]) | ||
| } else if (arr.length === 2) { | ||
| seconds = Number(arr[0]) * 60 + +Number(arr[1]) | ||
| } else { | ||
| throw new Error(`can't parse ${timeString}`) | ||
| } | ||
| return seconds | ||
| } | ||
|
|
||
| const notes = file.data.notes.map((note: any) => { | ||
| const attributes = note.attributes.reduce((acc: any, attribute: any) => { | ||
| return { | ||
| ...acc, | ||
| [attribute.name]: convertHMS(attribute.value), | ||
| } | ||
| }, {}) | ||
| note.type = 'root' | ||
| const contents = toMarkdown(note) | ||
| return { | ||
| text: contents.trim(), | ||
| ...attributes, | ||
| } | ||
| }) | ||
|
|
||
| let vtt = `WEBVTT\n\n` | ||
|
|
||
| notes.forEach((note: any) => { | ||
| vtt = | ||
| vtt + | ||
| `note\n${new Date(note.start * 1000) | ||
| .toISOString() | ||
| .substr(11, 8)}.000 --> ${new Date(note.end * 1000) | ||
| .toISOString() | ||
| .substr(11, 8)}.000 | ||
| ${note.text}\n\n` | ||
| }) | ||
|
|
||
| return vtt | ||
| }) | ||
| } | ||
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Oops, something went wrong.
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
this is an older version of this library
syntax-tree/unist-util-visit#23
apparently the entire unified ecosystem is making a principled stance on using ESM modules which is incompatible with Next.js (and most of the rest of the world) at this time. This causes a massive headache and debugging nightmare to implement, but it's a principled stance and open source so you can only complain about it so much I guess.
Kind of sucks when you just want to make stuff, particularly since it'd be relatively simple to support commonjs syntax for now.
This issue, in fact, has caused mdx to be forked
I don't like it.
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Maintainer of unified and mdx here, sorry you ran into a spot of trouble.
This characterization is unfair on a few fronts:
MDXProvidermdx-js/mdx#1425 and An alternative “shortcode” (mdxTypealternative) proposal mdx-js/mdx#1385, it has nothing to do with ESMIf you have questions on ESM or MDX in general, feel free to reach out to the MDX community https://github.com/mdx-js/mdx/discussions and/or unified community https://github.com/unifiedjs/unified/discussions
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Thanks for this detailed list of corrections.