@asd20/ui-next 2.33.2 → 2.33.3

package/CHANGELOG.md

@@ -1,5 +1,12 @@
 # Changelog
 
+## [2.33.3](https://github.com/academydistrict20/asd20-ui-next/compare/ui-next-v2.33.2...ui-next-v2.33.3) (2026-10-27)
+
+
+### Bug Fixes
+
+* limit size of videos in body content; exclude videos and images already in body content from media section ([aba90ce](https://github.com/academydistrict20/asd20-ui-next/commit/aba90ceec4c244a8317cc544972fa753615da982))
+
 ## [2.33.2](https://github.com/academydistrict20/asd20-ui-next/compare/ui-next-v2.33.1...ui-next-v2.33.2) (2026-10-26)
 
 ## [2.33.1](https://github.com/academydistrict20/asd20-ui-next/compare/ui-next-v2.33.0...ui-next-v2.33.1) (2026-10-26)

package/package.json

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

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

@@ -231,8 +231,9 @@ export default {
   }
 
   :deep(.asd20-message-video) {
-    max-width: 100%;
-    margin: 0.75rem 0;
+    width: 100%;
+    max-width: 1200px;
+    margin: 0.75rem auto;
   }
 
   :deep(.asd20-message-video__description) {

package/src/components/organisms/Asd20MediaSection/index.vue

@@ -1,22 +1,22 @@
 <template>
   <section
-    v-show="images.length || videos.length"
+    v-if="showImageGallery || remainingMedia.videos.length"
     class="asd20-media-section"
     role="complementary"
   >
     <slot name="before" />
 
     <asd20-image-gallery
-      v-if="allowSingleImageGallery ? images.length > 0 : images.length > 1"
+      v-if="showImageGallery"
       title="Images"
-      :images="images"
+      :images="galleryImages"
     >
     </asd20-image-gallery>
 
     <asd20-videos-section
-      v-if="videos.length > 0"
+      v-if="remainingMedia.videos.length > 0"
       title="Videos"
-      :videos="videos"
+      :videos="remainingMedia.videos"
     >
     </asd20-videos-section>
     <slot />
@@ -25,6 +25,7 @@
 
 <script>
 import { defineAsyncComponent } from 'vue'
+import excludeBodyMedia from '../../../helpers/excludeBodyMedia'
 
 export default {
   name: 'Asd20MediaSection',
@@ -40,6 +41,26 @@ export default {
     allowSingleImageGallery: { type: Boolean, default: false },
     images: { type: Array, default: () => [] },
     videos: { type: Array, default: () => [] },
+    // Include only messages whose bodies are displayed on this page.
+    bodyMessages: { type: Array, default: () => [] },
+  },
+  computed: {
+    remainingMedia() {
+      return excludeBodyMedia({
+        images: this.images,
+        videos: this.videos,
+        bodyMessages: this.bodyMessages,
+      })
+    },
+    galleryImages() {
+      return this.remainingMedia.images.filter(image => !image.isCover)
+    },
+    showImageGallery() {
+      // Preserve galleries that have one image left after body duplicates
+      // are removed, while retaining the existing single-image opt-in.
+      return this.galleryImages.length > 0 &&
+        (this.allowSingleImageGallery || this.images.length > 1)
+    },
   },
 }
 </script>

package/src/components/templates/Asd20ArticleDigestCompactTemplate/index.vue

@@ -210,6 +210,7 @@
 
     <asd20-media-section
       v-if="combinedMessageImages.length > 1 || combinedMessageVideos.length"
+      :body-messages="[...primaryMessages, ...secondaryMessages]"
       :images="combinedMessageImages || []"
       :videos="combinedMessageVideos || []"
     >

package/src/components/templates/Asd20ArticleDigestTemplate/index.vue

@@ -211,6 +211,7 @@
 
     <asd20-media-section
       v-if="combinedMessageImages.length > 1 || combinedMessageVideos.length"
+      :body-messages="[...primaryMessages, ...secondaryMessages]"
       :images="combinedMessageImages || []"
       :videos="combinedMessageVideos || []"
     >

package/src/components/templates/Asd20ArticleListTemplate/index.vue

@@ -230,6 +230,7 @@
 
     <asd20-media-section
       v-if="combinedMessageImages.length > 1 || combinedMessageVideos.length"
+      :body-messages="[...primaryMessages, ...secondaryMessages]"
       :images="combinedMessageImages || []"
       :videos="combinedMessageVideos || []"
     >

package/src/components/templates/Asd20ArticleTemplate/index.vue

@@ -95,9 +95,10 @@
     ></asd20-feeds-section> -->
 
     <asd20-media-section
-      v-if="shouldShowArticleMediaSection"
+      v-if="combinedMessageImages.length || combinedMessageVideos.length"
+      :body-messages="[...primaryDetailMessages, ...secondaryMessages]"
       allow-single-image-gallery
-      :images="articleGalleryImages || []"
+      :images="combinedMessageImages || []"
       :videos="combinedMessageVideos || []"
     >
     </asd20-media-section>

package/src/components/templates/Asd20CampusDetailTemplate/index.vue

@@ -89,6 +89,7 @@
 
     <asd20-media-section
       v-if="combinedMessageImages.length > 1 || combinedMessageVideos.length"
+      :body-messages="[...primaryMessages, ...secondaryMessages]"
       :images="combinedMessageImages || []"
       :videos="combinedMessageVideos || []"
     >

package/src/components/templates/Asd20ClubsTemplate/index.vue

@@ -222,6 +222,7 @@
 
     <asd20-media-section
       v-if="combinedMessageImages.length > 1 || combinedMessageVideos.length"
+      :body-messages="[...primaryMessages, ...secondaryMessages]"
       :images="combinedMessageImages || []"
       :videos="combinedMessageVideos || []"
     >

package/src/components/templates/Asd20DetailAlternateTemplate/index.vue

@@ -95,6 +95,7 @@
 
     <asd20-media-section
       v-if="combinedMessageImages.length > 1 || combinedMessageVideos.length"
+      :body-messages="[...primaryDetailMessages, ...secondaryMessages]"
       :images="combinedMessageImages || []"
       :videos="combinedMessageVideos || []"
     >

package/src/components/templates/Asd20DetailImageFullTemplate/index.vue

@@ -94,6 +94,7 @@
 
     <asd20-media-section
       v-if="combinedMessageImages.length > 1 || combinedMessageVideos.length"
+      :body-messages="[...primaryDetailMessages, ...secondaryMessages]"
       :images="combinedMessageImages || []"
       :videos="combinedMessageVideos || []"
     >

package/src/components/templates/Asd20DetailImageTemplate/index.vue

@@ -94,6 +94,7 @@
 
     <asd20-media-section
       v-if="combinedMessageImages.length > 1 || combinedMessageVideos.length"
+      :body-messages="[...primaryDetailMessages, ...secondaryMessages]"
       :images="combinedMessageImages || []"
       :videos="combinedMessageVideos || []"
     >

package/src/components/templates/Asd20DetailTemplate/index.vue

@@ -94,6 +94,7 @@
 
     <asd20-media-section
       v-if="combinedMessageImages.length > 1 || combinedMessageVideos.length"
+      :body-messages="[...primaryDetailMessages, ...secondaryMessages]"
       :images="combinedMessageImages || []"
       :videos="combinedMessageVideos || []"
     >

package/src/components/templates/Asd20FileListPageTemplate/index.vue

@@ -90,6 +90,7 @@
 
     <asd20-media-section
       v-if="combinedMessageImages.length > 1 || combinedMessageVideos.length"
+      :body-messages="[...primaryMessages, ...secondaryMessages]"
       :images="combinedMessageImages || []"
       :videos="combinedMessageVideos || []"
     >

package/src/components/templates/Asd20GroupFeatureTemplate/index.vue

@@ -91,6 +91,7 @@
 
     <asd20-media-section
       v-if="combinedMessageImages.length > 1 || combinedMessageVideos.length"
+      :body-messages="[...primaryMessagesGroup, ...secondaryMessages]"
       :images="combinedMessageImages || []"
       :videos="combinedMessageVideos || []"
     >

package/src/components/templates/Asd20ProfileTemplate/index.vue

@@ -276,6 +276,7 @@
 
     <asd20-media-section
       v-if="combinedMessageImages.length > 1 || combinedMessageVideos.length"
+      :body-messages="[...primaryMessages, ...secondaryMessages]"
       :images="combinedMessageImages || []"
       :videos="combinedMessageVideos || []"
     >

package/src/components/templates/Asd20WayfindingAlternateTemplate/index.vue

@@ -95,6 +95,7 @@
     <!-- Photos & Videos -->
     <asd20-media-section
       v-if="firstMessage.images.length > 1 || firstMessage.videos.length"
+      :body-messages="primaryMessage || []"
       :images="firstMessage.images || []"
       :videos="firstMessage.videos || []"
     >

package/src/components/templates/Asd20WayfindingImageTemplate/index.vue

@@ -96,6 +96,7 @@
     <!-- Photos & Videos -->
     <asd20-media-section
       v-if="firstMessage.images.length > 1 || firstMessage.videos.length"
+      :body-messages="primaryMessage || []"
       :images="firstMessage.images || []"
       :videos="firstMessage.videos || []"
     >

package/src/components/templates/Asd20WayfindingTemplate/index.vue

@@ -93,6 +93,7 @@
     <!-- Photos & Videos -->
     <asd20-media-section
       v-if="firstMessage.images.length > 1 || firstMessage.videos.length"
+      :body-messages="primaryMessage || []"
       :images="firstMessage.images || []"
       :videos="firstMessage.videos || []"
     >

package/src/helpers/excludeBodyMedia.js

@@ -0,0 +1,96 @@
+import { parseFragment } from 'parse5'
+import { buildRichBodyRenderModel } from '../components/atoms/Asd20RichBodyContent/messageDocumentRenderer'
+
+const STORAGE_HOST = 'asd20websitestorage.blob.core.windows.net'
+const RELATIVE_ORIGIN = 'https://ui-next.invalid'
+
+function resourceKey(value) {
+  if (typeof value !== 'string' || !value.trim()) return ''
+  try {
+    const url = new URL(value.trim(), RELATIVE_ORIGIN)
+    if (!['http:', 'https:'].includes(url.protocol)) return ''
+    url.hash = ''
+    // The website media proxy and blob origin serve the same stored files.
+    if (url.pathname.startsWith('/_media/')) {
+      return `storage:${url.pathname.slice('/_media'.length)}${url.search}`
+    }
+    if (url.hostname === STORAGE_HOST) {
+      return `storage:${url.pathname}${url.search}`
+    }
+    return url.href
+  } catch {
+    return ''
+  }
+}
+
+function videoKey(value) {
+  const key = resourceKey(value)
+  if (!key || key.startsWith('storage:')) return key
+  const url = new URL(key)
+  const host = url.hostname.replace(/^www\./, '')
+  if (['youtube.com', 'youtube-nocookie.com', 'youtu.be'].includes(host)) {
+    const id = host === 'youtu.be'
+      ? url.pathname.split('/')[1]
+      : url.searchParams.get('v') || url.pathname.match(/^\/(?:embed|shorts)\/([^/]+)/)?.[1]
+    if (id) return `youtube:${id}`
+  }
+  if (['vimeo.com', 'player.vimeo.com'].includes(host)) {
+    const id = url.pathname.match(/^\/(?:video\/)?(\d+)(?:\/|$)/)?.[1]
+    if (id) return `vimeo:${id}`
+  }
+  if (host === 'live.myvrspot.com' && url.searchParams.get('v')) {
+    return `myvrspot:${url.searchParams.get('v')}`
+  }
+  return key
+}
+
+function addSource(sources, value, normalize) {
+  const key = normalize(value)
+  if (key) sources.add(key)
+}
+
+function collectHtmlMedia(html, sources) {
+  const visit = node => {
+    const attrs = Object.fromEntries((node.attrs || []).map(attr => [attr.name, attr.value]))
+    if (node.tagName === 'img') {
+      addSource(sources.images, attrs.src, resourceKey)
+    }
+    if (['iframe', 'video'].includes(node.tagName) ||
+        (node.tagName === 'source' && node.parentNode?.tagName === 'video')) {
+      addSource(sources.videos, attrs.src, videoKey)
+    }
+    for (const child of node.childNodes || []) visit(child)
+  }
+  visit(parseFragment(html || ''))
+}
+
+export default function excludeBodyMedia({ images = [], videos = [], bodyMessages = [] } = {}) {
+  const sources = { images: new Set(), videos: new Set() }
+  for (const message of bodyMessages) {
+    if (!message) continue
+    // Use the renderer's selected content, including its HTML fallback for
+    // invalid/unsupported JSON, rather than inspecting stale saved sidecars.
+    const model = buildRichBodyRenderModel({
+      bodyContent: message.bodyContent || message.bodyHtml || '',
+      bodyJson: message.bodyJson,
+    })
+    for (const node of model.nodes) {
+      if (node.html) collectHtmlMedia(node.html, sources)
+      if (node.type === 'accordion') {
+        for (const item of node.block.items || []) {
+          if (item.contentType !== 'tableau') collectHtmlMedia(item.bodyHtml, sources)
+        }
+      }
+    }
+  }
+
+  return {
+    images: images.filter(image => image && ![
+      image.url,
+      ...(image.files || []).map(file => file?.url),
+    ].some(url => sources.images.has(resourceKey(url)))),
+    videos: videos.filter(video => video && ![
+      video.embedUrl, video.watchUrl, video.url,
+    ].some(url => sources.videos.has(videoKey(url)))),
+  }
+}

package/src/mixins/pageTemplateMixin.js

@@ -1,32 +1,6 @@
 import responsiveBreakpointMixin from './responsiveBreakpointMixin'
 import { buildBreadcrumbLinks } from '../helpers/breadcrumbLinks'
 
-function getMessageBodyHtml(message) {
-  return (message && (message.bodyContent || message.bodyHtml)) || ''
-}
-
-function getImageUrls(image) {
-  const urls = []
-  const files = (image && image.files) || []
-  if (image && image.url) urls.push(image.url)
-  files.forEach(file => {
-    if (file && file.url) urls.push(file.url)
-  })
-  return urls
-}
-
-function normalizeHtmlValue(value) {
-  return String(value || '').replace(/&/g, '&')
-}
-
-function imageAppearsInBody(image, bodyHtml) {
-  if (!bodyHtml) return false
-  const normalizedBodyHtml = normalizeHtmlValue(bodyHtml)
-  return getImageUrls(image).some(url =>
-    normalizedBodyHtml.includes(normalizeHtmlValue(url))
-  )
-}
-
 export default {
   mixins: [responsiveBreakpointMixin],
 
@@ -270,24 +244,6 @@ export default {
       }, [])
     },
 
-    articleGalleryImages() {
-      const messageBodies = (this.primaryDetailMessages || [])
-        .map(getMessageBodyHtml)
-        .filter(Boolean)
-
-      return this.combinedMessageImages.filter(image => {
-        if (!image || image.isCover) return false
-        return !messageBodies.some(bodyHtml => imageAppearsInBody(image, bodyHtml))
-      })
-    },
-
-    shouldShowArticleMediaSection() {
-      return (
-        this.articleGalleryImages.length > 0 ||
-        this.combinedMessageVideos.length > 0
-      )
-    },
-
     combinedMessageVideos() {
       return (this.messages || []).reduce((a, m) => {
         const videos = m.videos || []