@explorer-1/vue 0.2.80 → 0.2.82

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@explorer-1/vue",
-  "version": "0.2.80",
+  "version": "0.2.82",
   "private": false,
   "publishConfig": {
     "access": "public"

package/src/components/HeroInlineMedia/HeroInlineMedia.vue

@@ -41,7 +41,6 @@ const { heroBlocks, constrain } = reactive(props)
     <BlockVideo
       v-else-if="heroBlocks[0].blockType === 'VideoBlock'"
       :data="heroBlocks[0]"
-      autoplay
     />
     <BaseImagePlaceholder
       v-else-if="heroBlocks[0].blockType === 'VideoEmbedBlock'"

package/src/templates/edu/PageEduExplainerArticle/PageEduExplainerArticle.vue

@@ -56,12 +56,9 @@ export default defineComponent({
       return false
     },
     heroInline(): boolean {
-      // heroes with interactive elements have special handling
       if (this.theHero && !this.heroTitle) {
-        // excludes VideoBlock as this will autoplay
-        if (this.theHero.blockType === 'VideoBlock') {
-          return false
-        } else if (
+        // heroes with interactive elements have special handling
+        if (
           this.data?.heroPosition === 'inline' ||
           this.theHero.blockType === 'CarouselBlock' ||
           this.theHero.blockType === 'IframeEmbedBlock' ||
@@ -70,6 +67,7 @@ export default defineComponent({
         ) {
           return true
         }
+        return false
       }
       return false
     },

package/src/templates/edu/PageEduLesson/PageEduLesson.vue

@@ -113,12 +113,9 @@ const heroTitle = computed((): boolean => {
 })
 
 const heroInline = computed((): boolean => {
-  // heroes with interactive elements have special handling
   if (theHero.value && !heroTitle.value) {
-    // excludes VideoBlock as this will autoplay
-    if (theHero.value.blockType === 'VideoBlock') {
-      return false
-    } else if (
+    // heroes with interactive elements have special handling
+    if (
       data?.heroPosition === 'inline' ||
       theHero.value.blockType === 'CarouselBlock' ||
       theHero.value.blockType === 'IframeEmbedBlock' ||
@@ -127,6 +124,7 @@ const heroInline = computed((): boolean => {
     ) {
       return true
     }
+    return false
   }
   return false
 })

package/src/templates/edu/PageEduStudentProject/PageEduStudentProject.vue

@@ -92,12 +92,9 @@ const heroTitle = computed((): boolean => {
 })
 
 const heroInline = computed((): boolean => {
-  // heroes with interactive elements have special handling
   if (theHero.value && !heroTitle.value) {
-    // excludes VideoBlock as this will autoplay
-    if (theHero.value.blockType === 'VideoBlock') {
-      return false
-    } else if (
+    // heroes with interactive elements have special handling
+    if (
       data?.heroPosition === 'inline' ||
       theHero.value.blockType === 'CarouselBlock' ||
       theHero.value.blockType === 'IframeEmbedBlock' ||
@@ -106,6 +103,7 @@ const heroInline = computed((): boolean => {
     ) {
       return true
     }
+    return false
   }
   return false
 })

package/src/templates/edu/PageEduTeachableMoment/PageEduTeachableMoment.vue

@@ -52,12 +52,9 @@ const heroTitle = computed((): boolean => {
 })
 
 const heroInline = computed((): boolean => {
-  // heroes with interactive elements have special handling
   if (theHero.value && !heroTitle.value) {
-    // excludes VideoBlock as this will autoplay
-    if (theHero.value.blockType === 'VideoBlock') {
-      return false
-    } else if (
+    // heroes with interactive elements have special handling
+    if (
       data?.heroPosition === 'inline' ||
       theHero.value.blockType === 'CarouselBlock' ||
       theHero.value.blockType === 'IframeEmbedBlock' ||
@@ -66,6 +63,7 @@ const heroInline = computed((): boolean => {
     ) {
       return true
     }
+    return false
   }
   return false
 })

package/src/utils/mixins.ts

@@ -293,20 +293,33 @@ export const mixinFormatSplitEventDates = (
   endDatetime?: string,
   compact?: boolean
 ): EventDateObject => {
-  const startDateDayjs = dayjs(startDatetime)
+  const endDateDayjs = endDatetime ? dayjs(endDatetime) : undefined
 
-  const monthFormat = compact ? 'MM' : 'MMM'
-  let day = startDateDayjs.format('D')
-  const month = startDateDayjs.format(monthFormat).replace('.', '')
-  const year = startDateDayjs.format('YYYY')
-  const monthAndYear = startDateDayjs.format(`${monthFormat} YYYY`)
+  const startDateDayjs = () => {
+    // use the end date if the event has started but hasn't ended
+    let date = startDatetime
+    const startDate = startDatetime ? dayjs(startDatetime) : undefined
+    if (startDatetime && endDatetime && endDateDayjs && startDate) {
+      let now = dayjs(new Date())
+      if (endDateDayjs > now && startDate < now) {
+        date = endDatetime
+      } else {
+        date = startDatetime
+      }
+    }
+    return dayjs(date)
+  }
 
-  if (endDatetime) {
-    const endDateDayjs = dayjs(endDatetime)
+  const monthFormat = compact ? 'MM' : 'MMM'
+  let day = startDateDayjs().format('D')
+  const month = startDateDayjs().format(monthFormat).replace('.', '')
+  const year = startDateDayjs().format('YYYY')
+  const monthAndYear = startDateDayjs().format(`${monthFormat} YYYY`)
 
+  if (endDateDayjs) {
     if (
-      startDateDayjs.format('MM') === endDateDayjs.format('MM') &&
-      startDateDayjs.format('ll') !== endDateDayjs.format('ll')
+      startDateDayjs().format('MM') === endDateDayjs.format('MM') &&
+      startDateDayjs().format('ll') !== endDateDayjs.format('ll')
     ) {
       // If event spans multiple days within the same month, show both days
       day = `${day}-${endDateDayjs.format('D')}`