@asd20/ui-next 2.16.0 → 2.17.0

package/CHANGELOG.md

@@ -1,5 +1,12 @@
 # Changelog
 
+# [2.17.0](https://github.com/academydistrict20/asd20-ui-next/compare/ui-next-v2.16.0...ui-next-v2.17.0) (2026-08-05)
+
+
+### Features
+
+* add canonical video rendering ([295fbfd](https://github.com/academydistrict20/asd20-ui-next/commit/295fbfd38d3d66c2bc1e0070fb98a15ba6e51d02))
+
 # [2.16.0](https://github.com/academydistrict20/asd20-ui-next/compare/ui-next-v2.15.1...ui-next-v2.16.0) (2026-08-04)
 
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@asd20/ui-next",
-  "version": "2.16.0",
+  "version": "2.17.0",
   "private": false,
   "description": "ASD20 UI component library for Vue 3.",
   "license": "MIT",

package/src/components/atoms/Asd20RichBodyContent/index.vue

@@ -157,5 +157,30 @@ export default {
   :deep(.asd20-message-table td > :last-child) {
     margin-bottom: 0;
   }
+
+  :deep(.asd20-message-video) {
+    max-width: 100%;
+    margin: 0.75rem 0;
+  }
+
+  :deep(.asd20-message-video__description) {
+    margin: 0 0 0.5rem;
+  }
+
+  :deep(.asd20-message-video__frame) {
+    position: relative;
+    width: 100%;
+    overflow: hidden;
+    aspect-ratio: 16 / 9;
+    background: #000;
+  }
+
+  :deep(.asd20-message-video__frame iframe) {
+    position: absolute;
+    inset: 0;
+    width: 100%;
+    height: 100%;
+    border: 0;
+  }
 }
 </style>

package/src/components/atoms/Asd20RichBodyContent/messageDocumentRenderer.js

@@ -56,6 +56,22 @@ const MARK_TYPES = new Set([
   'superscript',
 ])
 const TABLE_HEADER_SCOPES = new Set(['col', 'row', 'colgroup', 'rowgroup'])
+const VIDEO_TITLE_MAX_LENGTH = 200
+const VIDEO_DESCRIPTION_MAX_LENGTH = 1000
+const VIDEO_PROVIDER_RULES = Object.freeze([
+  {
+    host: 'www.youtube.com',
+    pathPattern: /^\/embed\/([A-Za-z0-9_-]{11})$/,
+  },
+  {
+    host: 'www.youtube-nocookie.com',
+    pathPattern: /^\/embed\/([A-Za-z0-9_-]{11})$/,
+  },
+  {
+    host: 'player.vimeo.com',
+    pathPattern: /^\/video\/([0-9]+)$/,
+  },
+])
 const MARK_RENDER_ORDER = Object.freeze({
   link: 0,
   bold: 1,
@@ -196,6 +212,45 @@ function isSafeResource(value, allowHash = false) {
   }
 }
 
+function isCanonicalVideoEmbedSource(value) {
+  if (typeof value !== 'string' || !value) return false
+
+  try {
+    const url = new URL(value)
+    if (
+      url.protocol !== 'https:' ||
+      url.username ||
+      url.password ||
+      url.port ||
+      url.search ||
+      url.hash
+    ) {
+      return false
+    }
+
+    const rule = VIDEO_PROVIDER_RULES.find(
+      candidate => candidate.host === url.hostname.toLowerCase()
+    )
+    return Boolean(
+      rule &&
+        rule.pathPattern.test(url.pathname) &&
+        value === `https://${rule.host}${url.pathname}`
+    )
+  } catch (_error) {
+    return false
+  }
+}
+
+function validateRequiredCanonicalText(node, name, path, maximumLength) {
+  const attrIssue = validateStringAttribute(node, name, path, true)
+  if (attrIssue) return attrIssue
+
+  const value = node.attrs[name]
+  return !value || value !== value.trim() || value.length > maximumLength
+    ? issue('malformed-attribute', path, name)
+    : null
+}
+
 function validateMarks(marks, path) {
   if (marks === undefined) return null
   if (!Array.isArray(marks)) return issue('malformed-marks', path)
@@ -396,14 +451,24 @@ function validateNode(node, path) {
     return validateAtom(node, path)
   }
   if (node.type === 'videoEmbed') {
-    const srcIssue = validateStringAttribute(node, 'src', path)
-    if (srcIssue || (node.attrs?.src && !isSafeResource(node.attrs.src))) {
+    const srcIssue = validateStringAttribute(node, 'src', path, true)
+    if (srcIssue || !isCanonicalVideoEmbedSource(node.attrs?.src)) {
       return srcIssue || issue('unsafe-resource', path, 'src')
     }
-    for (const name of ['title', 'descriptiveText']) {
-      const attrIssue = validateStringAttribute(node, name, path)
-      if (attrIssue) return attrIssue
-    }
+    const titleIssue = validateRequiredCanonicalText(
+      node,
+      'title',
+      path,
+      VIDEO_TITLE_MAX_LENGTH
+    )
+    if (titleIssue) return titleIssue
+    const descriptionIssue = validateRequiredCanonicalText(
+      node,
+      'descriptiveText',
+      path,
+      VIDEO_DESCRIPTION_MAX_LENGTH
+    )
+    if (descriptionIssue) return descriptionIssue
     return validateAtom(node, path)
   }
   if (node.type === 'table') {
@@ -666,16 +731,25 @@ function renderStandardNode(node) {
     )}${attribute('height', node.attrs.height)}>`
   }
   if (node.type === 'videoEmbed') {
-    return `<div data-cc-node="video"${attribute(
+    return `<div class="asd20-message-video" data-cc-node="video"${attribute(
       'data-src',
       node.attrs.src
     )}${attribute('data-title', node.attrs.title)}${attribute(
       'data-descriptive-text',
       node.attrs.descriptiveText
-    )}><iframe${attribute('src', node.attrs.src)}${attribute(
+    )}><p class="asd20-message-video__description">${escapeHtml(
+      node.attrs.descriptiveText
+    )}</p><div class="asd20-message-video__frame"><iframe${attribute(
+      'src',
+      node.attrs.src
+    )}${attribute(
       'title',
-      node.attrs.title || 'Embedded video'
-    )}></iframe></div>`
+      node.attrs.title
+    )} loading="lazy" referrerpolicy="strict-origin-when-cross-origin"${attribute(
+      'allowfullscreen',
+      '',
+      true
+    )}></iframe></div></div>`
   }
   if (node.type === 'table') return renderTable(node)
   if (node.type === 'tableRow') return `<tr>${renderChildren(node)}</tr>`