feat: display embedded media player (#2417)

composables/content-parse.ts

@@ -150,6 +150,25 @@ export function convertMastodonHTML(html: string, customEmojis: Record<string, m
   return render(tree)
 }
 
+export function sanitizeEmbeddedIframe(html: string): Node {
+  const transforms: Transform[] = [
+    sanitize({
+      iframe: {
+        src: (src) => {
+          if (typeof src !== 'string')
+            return undefined
+
+          const url = new URL(src)
+          return url.protocol === 'https:' ? src : undefined
+        },
+        allowfullscreen: set('true'),
+      },
+    }),
+  ]
+
+  return transformSync(parse(html), transforms)
+}
+
 export function htmlToText(html: string) {
   try {
     const tree = parse(html)

composables/content-render.ts

@@ -36,7 +36,7 @@ export function contentToVNode(
   return h(Fragment, (tree.children as Node[] || []).map(n => treeToVNode(n)))
 }
 
-function nodeToVNode(node: Node): VNode | string | null {
+export function nodeToVNode(node: Node): VNode | string | null {
   if (node.type === TEXT_NODE)
     return node.value
 

composables/settings/definition.ts

@@ -26,6 +26,7 @@ export interface PreferencesSettings {
   experimentalVirtualScroller: boolean
   experimentalGitHubCards: boolean
   experimentalUserPicker: boolean
+  experimentalEmbeddedMedia: boolean
 }
 
 export interface UserSettings {
@@ -78,6 +79,7 @@ export const DEFAULT__PREFERENCES_SETTINGS: PreferencesSettings = {
   experimentalVirtualScroller: true,
   experimentalGitHubCards: true,
   experimentalUserPicker: true,
+  experimentalEmbeddedMedia: false,
 }
 
 export function getDefaultUserSettings(locales: string[]): UserSettings {