oat
/
cohost-blogger
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

improve video formatting 

no longer as janky! autoplay also now properly works.
This commit is contained in:
Jill 2023-05-18 04:07:13 +03:00
parent 2bfe5dc341
commit 56bf08de16
Signed by: oat
GPG Key ID: 33489AA58A955108
4 changed files with 218 additions and 110 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
flake.nix
View File

@ -18,7 +18,7 @@
pname = "cohost-blogger"; pname = "cohost-blogger";
inherit (package) version; inherit (package) version;
npmDepsHash = "sha256-ixRfoMWVKPomqZJuvKfE2dDrqq7DrTryMCFT37MY/c8="; npmDepsHash = "sha256-VSEkIBeF3FSYI8FbvgskznPmlqavM6g4ruLyMWe3eDE=";
doCheck = true; doCheck = true;

298
package-lock.json generated
View File

File diff suppressed because it is too large Load Diff

5
package.json
View File

@ -12,8 +12,8 @@
}, },
"devDependencies": { "devDependencies": {
"@sveltejs/adapter-node": "^1.2.4", "@sveltejs/adapter-node": "^1.2.4",
"@types/marked": "^4.0.8",
"@sveltejs/kit": "^1.5.0", "@sveltejs/kit": "^1.5.0",
"@types/marked": "^4.0.8",
"eslint": "^8.28.0", "eslint": "^8.28.0",
"eslint-plugin-svelte3": "^4.0.0", "eslint-plugin-svelte3": "^4.0.0",
"svelte": "^3.54.0", "svelte": "^3.54.0",
@ -43,6 +43,7 @@
"stringify-entities": "^4.0.3", "stringify-entities": "^4.0.3",
"timeago.js": "^4.0.2", "timeago.js": "^4.0.2",
"unified": "^10.1.2", "unified": "^10.1.2",
"unist-util-visit": "^4.1.2" "unist-util-visit": "^4.1.2",
"video-extensions-list": "^1.0.4"
} }
} }

23
src/lib/markdown/processors.js
View File

@ -1,4 +1,5 @@
import { visit } from "unist-util-visit"; import { visit } from 'unist-util-visit';
import videoExtensions from 'video-extensions-list';
/** /**
* @param {RootAST} hast * @param {RootAST} hast
@ -69,9 +70,11 @@ export function makeLazyEmbeds(hast) {
// only child of their parent node. // only child of their parent node.
if (parent.children.length != 1) return; if (parent.children.length != 1) return;
const url = new URL(node.properties.href);
// plain videos // plain videos
// todo: THIS IS LAZY!!!! const ext = (url.pathname || '').split('.').pop();
if (node.properties?.href.endsWith('.mp4') || node.properties?.href.endsWith('.webm')) { if (ext && videoExtensions.includes(ext)) {
// render the parent element to fit the video better // render the parent element to fit the video better
if (parent.type === 'element') { if (parent.type === 'element') {
parent.tagName = 'div'; parent.tagName = 'div';
@ -82,24 +85,26 @@ export function makeLazyEmbeds(hast) {
type: 'element', type: 'element',
tagName: 'video', tagName: 'video',
properties: { properties: {
src: node.properties?.href, src: url.href,
autoplay: 'true', autoplay: 'true',
playsinline: 'true', playsinline: 'true',
// todo: what the hell // since we're not able to get external metadata, and we don't want to
loop: node.properties?.href.includes('autoplay=false') ? 'false' : 'true', // make _all_ videos autoplay, we have to scan the searchParams for
style: 'width: 100%;max-width: 600px', // autoplay=false. this sucks! it's the best we can do
loop: (url.searchParams.get('autoplay') !== 'false').toString(),
style: 'width:100%;max-width:600px',
controls: 'true' controls: 'true'
}, },
children: [], children: [],
}); });
// youtube videos // youtube videos
} else if (node.properties?.href.startsWith('https://www.youtube.com/')) { } else if (url.hostname === 'www.youtube.com') {
// <iframe src="https://www.youtube.com/embed/avNF21NRe10?feature=oembed" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen="" title="[NotITG Release] eyes in the water" name="fitvid0" frameborder="0"></iframe> // <iframe src="https://www.youtube.com/embed/avNF21NRe10?feature=oembed" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen="" title="[NotITG Release] eyes in the water" name="fitvid0" frameborder="0"></iframe>
parent.children.splice(index, 1, { parent.children.splice(index, 1, {
type: 'element', type: 'element',
tagName: 'iframe', tagName: 'iframe',
properties: { properties: {
src: node.properties?.href.replace('/watch?v=', '/embed/'), src: url.href.replace('/watch?v=', '/embed/'),
allow: 'accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture', allow: 'accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture',
frameborder: 0, frameborder: 0,
style: 'width:100%;aspect-ratio:16/9', style: 'width:100%;aspect-ratio:16/9',