@explorer-1/vue 1.1.13 → 1.1.15

package/CHANGELOG.md

@@ -1,5 +1,19 @@
 # @explorer-1/vue
 
+## 1.1.15
+
+### Patch Changes
+
+- de2df9a: Updates to prepare for Explore JPL. Most updates are concerned with improving UX on AttractionCard
+- Updated dependencies [de2df9a]
+  - @explorer-1/common@2.1.8
+
+## 1.1.14
+
+### Patch Changes
+
+- 215a70a: Fixed audio scrubber in BaseAudio.vue
+
 ## 1.1.13
 
 ### Patch Changes

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@explorer-1/vue",
-  "version": "1.1.13",
+  "version": "1.1.15",
   "private": false,
   "publishConfig": {
     "access": "public"
@@ -34,7 +34,7 @@
     "vue-router": "^5.0.3",
     "vue3-compare-image": "^1.2.6",
     "vue3-observe-visibility": "^1.0.6",
-    "@explorer-1/common": "2.1.7"
+    "@explorer-1/common": "2.1.8"
   },
   "devDependencies": {
     "@vitejs/plugin-vue": "^6.0.5",

package/src/components/AttractionCard/AttractionCard.vue

@@ -43,11 +43,26 @@ const props = defineProps({
     type: String,
     default: undefined
   },
+  /**
+   * The description for use as card text. Plain text only.
+   */
+  description: {
+    type: String,
+    default: undefined
+  },
+  /**
+   * The theme text. Plain text only.
+   */
+  theme: {
+    type: String,
+    default: undefined
+  },
   /**
    * The image for the listing card.
    */
   image: {
-    type: Object
+    type: Object,
+    default: undefined
   },
   /**
    * Controls the visibility of the Bookmark icon and its associated metadata.
@@ -78,6 +93,12 @@ const props = defineProps({
       class="border-gray-light-mid lg:pb-10 lg:mb-10 relative grid grid-cols-12 gap-5 pb-6 mb-6 border-b"
     >
       <div class="col-span-9">
+        <div
+          v-if="theme"
+          class="text-subtitle-sm md:text-subtitle mb-3 md:mb-5 text-gray-mid-dark"
+        >
+          {{ props.theme }}
+        </div>
         <BaseHeading
           v-if="props.title"
           :level="props.headingLevel"
@@ -91,6 +112,22 @@ const props = defineProps({
           :show-my-list="props.showMyList"
           :location-icon="props.locationIcon"
         />
+        <div class="hidden md:block">
+          <div
+            v-if="props.description"
+            class="w-full mt-5 text-body-md"
+          >
+            {{ props.description }}
+          </div>
+          <BaseLink
+            v-if="props.url"
+            class="mt-5"
+            variant="primary"
+            :href="props.url"
+          >
+            Learn more
+          </BaseLink>
+        </div>
       </div>
       <div
         v-if="props.image"
@@ -108,6 +145,22 @@ const props = defineProps({
           />
         </BaseImagePlaceholder>
       </div>
+      <div class="col-span-full md:hidden">
+        <div
+          v-if="props.description"
+          class="w-full text-body-md"
+        >
+          {{ props.description }}
+        </div>
+        <BaseLink
+          v-if="props.url"
+          class="mt-5"
+          variant="primary"
+          :href="props.url"
+        >
+          Learn more
+        </BaseLink>
+      </div>
     </div>
   </BaseLink>
 </template>

package/src/components/BaseAudio/BaseAudio.vue

@@ -215,6 +215,8 @@ export default defineComponent({
       this.audio.removeEventListener('loadeddata', this._handleLoaded)
       this.audio.removeEventListener('pause', this._handlePlayPause)
       this.audio.removeEventListener('play', this._handlePlayPause)
+      this.audio.removeEventListener('durationchange', this._handleDurationChange)
+      this.audio.removeEventListener('loadedmetadata', this._handleDurationChange)
     }
   },
   methods: {
@@ -259,6 +261,9 @@ export default defineComponent({
       if (this.playing && !this.paused) {
         return
       } else if (this.audio) {
+        if (this.totalDuration === 0 && !isNaN(this.audio.duration)) {
+          this.totalDuration = this.audio.duration
+        }
         this.paused = false
         this.audio.play()
         this.playing = true
@@ -295,7 +300,7 @@ export default defineComponent({
         if (this.autoPlay) this.play()
 
         this.loaded = true
-        this.totalDuration = this.audio.duration
+        this.totalDuration = isNaN(this.audio.duration) ? 0 : this.audio.duration
       } else {
         throw new Error('Failed to load audio file')
       }
@@ -325,6 +330,11 @@ export default defineComponent({
     _handleEnded() {
       this.paused = this.playing = false
     },
+    _handleDurationChange() {
+      if (this.audio) {
+        this.totalDuration = isNaN(this.audio.duration) ? 0 : this.audio.duration
+      }
+    },
     init() {
       if (this.audio) {
         this.audio.addEventListener('timeupdate', this._handlePlayingUI)
@@ -332,6 +342,13 @@ export default defineComponent({
         this.audio.addEventListener('pause', this._handlePlayPause)
         this.audio.addEventListener('play', this._handlePlayPause)
         this.audio.addEventListener('ended', this._handleEnded)
+        this.audio.addEventListener('loadedmetadata', this._handleDurationChange)
+        this.audio.addEventListener('durationchange', this._handleDurationChange)
+
+        // Fallback: metadata already available before calling init() (e.g. cached audio)
+        if (this.totalDuration === 0 && !isNaN(this.audio.duration)) {
+          this.totalDuration = this.audio.duration
+        }
       }
       // TODO: VUE3: pass uuID to pauseOthers() method
       // eventBus.on('play', () => this.pauseOthers())

package/src/components/MetadataStacked/MetadataStacked.stories.js

@@ -1,4 +1,5 @@
 import MetadataStacked from './MetadataStacked.vue'
+import ExploreJplIconImage from '@explorer-1/common-storybook/src/story-data/images/2026-Explore-JPL-Site-Number-1-Missions-in-Flight.png'
 
 export default {
   title: 'Components/Utilities/MetadataStacked',
@@ -10,7 +11,7 @@ export default {
 // data
 export const MetadataStackedData = {
   location: 'Building 179, Highbay 1',
-  locationIcon: '',
+  locationIcon: ExploreJplIconImage,
   wait: '45 minute wait',
   showMyList: true
 }

package/src/components/MetadataStacked/MetadataStacked.vue

@@ -36,15 +36,15 @@ const props = defineProps({
 </script>
 
 <template>
-  <div class="MetadataStacked inline-flex flex-col flex-start gap-2.5 text-body-md">
+  <div class="MetadataStacked inline-flex flex-col flex-start gap-2 md:gap-2.5 text-body-md">
     <div
       v-if="props.location"
-      class="flex flex-row gap-2.5 items-center self-stretch"
+      class="flex flex-row gap-2 md:gap-2.5 items-start self-stretch"
     >
       <img
         v-if="props.locationIcon"
         :src="props.locationIcon"
-        class="w-4 h-4"
+        class="mt-[0.1rem] lg:mt-[0.2rem] w-6 h-6"
         alt=""
       />
       <IconLocation
@@ -55,17 +55,25 @@ const props = defineProps({
     </div>
     <div
       v-if="props.wait"
-      class="flex flex-row gap-2.5 items-center self-stretch"
+      class="flex flex-row gap-2 md:gap-2.5 items-center self-stretch"
     >
-      <IconHourglass class="MetadataStackedIcon text-jpl-red" />
+      <div class="w-6">
+        <IconHourglass class="MetadataStackedIcon text-jpl-red block mx-auto" />
+      </div>
       <span>{{ props.wait }}</span>
     </div>
     <div
       v-if="props.showMyList"
-      class="flex flex-row gap-2.5 items-center self-stretch"
+      class="flex flex-row gap-2 md:gap-2.5 items-center self-stretch"
     >
-      <IconBookmark class="MetadataStackedIcon text-gray-mid" />
+      <div class="w-6">
+        <IconBookmark class="MetadataStackedIcon text-gray-mid" />
+      </div>
       <span class="italic">Added to my list</span>
     </div>
   </div>
 </template>
+
+<style lang="scss">
+@import '@explorer-1/common/src/scss/components/MetadataStacked';
+</style>

package/src/components/SearchResultCard/SearchResultCard.stories.js

@@ -1,4 +1,5 @@
 import SearchResultCard from './SearchResultCard.vue'
+import ExploreJplIconImage from '@explorer-1/common-storybook/src/story-data/images/2026-Explore-JPL-Site-Number-1-Missions-in-Flight.png'
 
 export default {
   title: 'Components/Cards/SearchResultCards',
@@ -81,10 +82,13 @@ export const EduEventCard = {
 export const AttractionCard = {
   args: {
     ...SearchResultCardData,
+    theme: 'Missions that Changed the World',
     isAttraction: true,
-    location: 'Building 179, Highbay 1',
-    locationIcon: '',
+    location: 'Building 179, Highbay 1, Subfloor 204',
+    locationIcon: ExploreJplIconImage,
     wait: '45 minute wait',
-    showMyList: true
+    showMyList: true,
+    searchDescription:
+      'This is the card description lorem ipsum dolor sit amet. Consectatur adipscing this is the card description. Lorem ipsum dolor sit amet.'
   }
 }

package/src/components/SearchResultCard/SearchResultCard.vue

@@ -70,6 +70,8 @@
       :wait="wait"
       :show-my-list="showMyList"
       :location-icon="locationIcon"
+      :theme="theme"
+      :description="searchDescription"
     />
     <BaseLink
       v-else
@@ -405,6 +407,17 @@ export default defineComponent({
     locationIcon: {
       type: String,
       default: ''
+    },
+    theme: {
+      type: String,
+      default: undefined
+    },
+    /**
+     * The search meta description for use as card text. Plain text only.
+     */
+    searchDescription: {
+      type: String,
+      default: undefined
     }
   },
   computed: {

package/src/components/SearchResultsList/SearchResultsList.stories.js

@@ -1246,6 +1246,7 @@ export const SearchResultsListAttractionData = {
           },
           explore_jpl_sites_explorejplsite__attraction_type_filter: 'Exhibits',
           explore_jpl_sites_explorejplsite__attraction_type: 'Exhibits',
+          explore_jpl_sites_explorejplsite__theme_type_filter: 'Moon to Mars',
           explore_jpl_sites_explorejplsite__wait_time_filter: '15',
           explore_jpl_sites_explorejplsite__wait_time_label_filter: '15 minute wait',
           explore_jpl_sites_explorejplsite__latitude: '34.2012848',
@@ -1373,6 +1374,7 @@ export const SearchResultsListAttractionData = {
           },
           explore_jpl_sites_explorejplsite__attraction_type_filter: 'Exhibits',
           explore_jpl_sites_explorejplsite__attraction_type: 'Exhibits',
+          explore_jpl_sites_explorejplsite__theme_type_filter: 'Moon to Mars',
           explore_jpl_sites_explorejplsite__wait_time_filter: '',
           explore_jpl_sites_explorejplsite__wait_time_label_filter: '',
           explore_jpl_sites_explorejplsite__latitude: '34.2012848',
@@ -1495,6 +1497,7 @@ export const SearchResultsListAttractionData = {
           },
           explore_jpl_sites_explorejplsite__attraction_type_filter: 'Exhibits',
           explore_jpl_sites_explorejplsite__attraction_type: 'Exhibits',
+          explore_jpl_sites_explorejplsite__theme_type_filter: 'Moon to Mars',
           explore_jpl_sites_explorejplsite__wait_time_filter: '',
           explore_jpl_sites_explorejplsite__wait_time_label_filter: '60 minute wait',
           explore_jpl_sites_explorejplsite__latitude: '34.2012848',
@@ -1617,6 +1620,7 @@ export const SearchResultsListAttractionData = {
           },
           explore_jpl_sites_explorejplsite__attraction_type_filter: 'Exhibits',
           explore_jpl_sites_explorejplsite__attraction_type: 'Exhibits',
+          explore_jpl_sites_explorejplsite__theme_type_filter: 'Moon to Mars',
           explore_jpl_sites_explorejplsite__wait_time_filter: '0',
           explore_jpl_sites_explorejplsite__wait_time_label_filter: 'No wait',
           explore_jpl_sites_explorejplsite__latitude: '34.2012848',
@@ -1739,6 +1743,7 @@ export const SearchResultsListAttractionData = {
           },
           explore_jpl_sites_explorejplsite__attraction_type_filter: 'Exhibits',
           explore_jpl_sites_explorejplsite__attraction_type: 'Exhibits',
+          explore_jpl_sites_explorejplsite__theme_type_filter: 'Moon to Mars',
           explore_jpl_sites_explorejplsite__wait_time_filter: '90',
           explore_jpl_sites_explorejplsite__wait_time_label_filter: '90 minutes wait',
           explore_jpl_sites_explorejplsite__latitude: '34.2012848',
@@ -1864,6 +1869,7 @@ export const SearchResultsListAttractionData = {
           },
           explore_jpl_sites_explorejplsite__attraction_type_filter: 'Exhibits',
           explore_jpl_sites_explorejplsite__attraction_type: 'Exhibits',
+          explore_jpl_sites_explorejplsite__theme_type_filter: 'Moon to Mars',
           explore_jpl_sites_explorejplsite__wait_time_filter: '135',
           explore_jpl_sites_explorejplsite__wait_time_label_filter: 'more than 2 hour wait',
           explore_jpl_sites_explorejplsite__latitude: '34.2012848',

package/src/components/SearchResultsList/SearchResultsList.vue

@@ -40,8 +40,10 @@
           :primary-subject="page.primarySubject as unknown as PrimarySubjectObject"
           :grade-levels="page.gradeLevels as unknown as GradeLevelsObject[]"
           :time="page.time as unknown as EduResourcesTime"
+          :theme="page.theme"
           :title="page.title"
           :summary="page.summary"
+          :search-description="page.searchDescription"
           :featured="featureFirstResult ? index === 0 && currentPage === 1 : false"
           heading-level="h2"
         />
@@ -275,6 +277,14 @@ export default defineComponent({
                 handle === 'explore_jpl_sites_explorejplsite'
                   ? page._source[handle + '__map_icon']?.thumbnail_image
                   : undefined
+              page.searchDescription =
+                handle === 'explore_jpl_sites_explorejplsite'
+                  ? page._source.search_description
+                  : undefined
+              page.theme =
+                handle === 'explore_jpl_sites_explorejplsite'
+                  ? page._source[handle + '__theme_type_filter']
+                  : undefined
               if (image) {
                 page.image = {
                   src: {

package/src/interfaces.ts

@@ -147,6 +147,7 @@ export interface ElasticSearchPage {
   location?: string
   locationIcon?: string
   wait?: string
+  theme?: string
   title: string
   summary?: string
   eventType?: string
@@ -155,6 +156,7 @@ export interface ElasticSearchPage {
   gradeLevels?: string
   time?: string
   targetAudience?: string
+  searchDescription?: string
 }
 
 export interface FormOption {
@@ -255,6 +257,10 @@ export interface FooterResponse {
   footer: any
 }
 
+export interface BannerAdminResponse {
+  bannerAdmin: any
+}
+
 export interface EDUSubjectArea {
   id: number
   primarySubject: EduResourcesSubject

package/src/templates/explore-jpl/PageSiteExploreApp/PageSiteExploreApp.stories.js

@@ -1,5 +1,5 @@
 import { BlockLinkCardCarouselData } from './../../../components/BlockLinkCarousel/BlockLinkCarousel.stories.js'
-
+import ExploreJplIconImage from '@explorer-1/common-storybook/src/story-data/images/2026-Explore-JPL-Site-Number-1-Missions-in-Flight.png'
 import PageSiteExploreApp from './PageSiteExploreApp.vue'
 
 export default {
@@ -39,7 +39,9 @@ export const ExploreAppSitePageData = {
   location: 'Cafe 186',
   waitTime: '60',
   waitTimeLabel: '60 minute wait',
-  locationIcon: '',
+  mapIcon: {
+    url: ExploreJplIconImage
+  },
   body: [
     {
       blockType: 'RichTextBlock',

package/src/templates/explore-jpl/PageSiteExploreApp/PageSiteExploreApp.vue

@@ -12,7 +12,6 @@ import BlockStreamfield from './../../../components/BlockStreamfield/BlockStream
 import BlockLinkCarousel from './../../../components/BlockLinkCarousel/BlockLinkCarousel.vue'
 import BaseExploreApp from './../../explore-jpl/BaseExploreApp/BaseExploreApp.vue'
 import BaseButton from '../../../components/BaseButton/BaseButton.vue'
-import BaseLink from '../../../components/BaseLink/BaseLink.vue'
 import MetadataStacked from '../../../components/MetadataStacked/MetadataStacked.vue'
 import IconMap from '../../../components/Icons/IconMap.vue'
 
@@ -27,22 +26,6 @@ const props = defineProps({
 })
 const { data } = reactive(props)
 
-// Handle navigating back to Sites page
-const previousPath = computed(() => {
-  try {
-    const path = route.path
-
-    // Split URL segments and remove last item
-    const segements = path.split('/').filter(Boolean)
-    segements.pop()
-
-    // Return Sites path
-    return '/' + segements.join('/')
-  } catch (e) {
-    return '/'
-  }
-})
-
 // Handle opening map to focus on respective site
 const mapPath = computed(() => {
   try {
@@ -67,26 +50,11 @@ const mapPath = computed(() => {
   >
     <BaseExploreApp :nav-data="data.breadcrumb">
       <template #default>
-        <!-- back nav -->
-        <LayoutHelper
-          indent="col-2"
-          class="mb-5"
-        >
-          <BaseLink
-            class="BackToSitesBtn"
-            variant="primary"
-            :caret-left="true"
-            caret-margin-right="mr-1"
-            :to="previousPath"
-            >Back to Sites</BaseLink
-          >
-        </LayoutHelper>
-
         <!-- page title area -->
         <LayoutHelper indent="col-2">
           <DetailHeadline
             :title="data.title"
-            class="mb-5"
+            class="my-5 lg:mt-10"
           />
           <MetadataStacked
             :location="data.location"
@@ -151,8 +119,3 @@ const mapPath = computed(() => {
     </BaseExploreApp>
   </div>
 </template>
-<style lang="scss" scoped>
-.BackToSitesBtn {
-  margin-left: -10px;
-}
-</style>