introduced theming.headingSrcSet allowing to define multiple heading backgrounds based on device width/resolution

Author: fcamblor

cloud/functions/src/crawlers/crawler-parsers.ts

@@ -60,6 +60,10 @@ export const EVENT_THEME_PARSER = z.object({
       subTitle: z.string().nullable(),
       banner: z.string().nullable(),
     }).optional().nullable().default(null),
+    headingSrcSet: z.array(z.object({
+      url: z.string(),
+      descriptor: z.string().regex(/\d(?:w|x)/)
+    })).min(1).optional().nullable().default(null),
     customGoogleFontFamilies: z.array(z.string()).optional().nullable().default(null),
 })
 

mobile/src/components/events/CurrentEventHeader.vue

@@ -20,7 +20,8 @@
       </div>
     </ion-toolbar>
     <img
-      :src="confDescriptor.backgroundUrl"
+      :src="!confDescriptor.theming.headingSrcSet?.length && confDescriptor.backgroundUrl ? confDescriptor.backgroundUrl : ''"
+      :srcset="confDescriptor.theming.headingSrcSet?.length ? confDescriptor.theming.headingSrcSet.map(entry => `${entry.url} ${entry.descriptor}`).join(', ') : ''"
       :alt="LL.Banner_Event()"
       :style="confDescriptor.theming.headingCustomStyles?.banner || ''"
     />

mobile/src/components/events/EventTalksGroup.vue

@@ -1,5 +1,8 @@
 <template>
-  <img :src="confDescriptor.backgroundUrl">
+  <img
+    :src="!confDescriptor.theming.headingSrcSet?.length && confDescriptor.backgroundUrl ? confDescriptor.backgroundUrl : ''"
+    :srcset="confDescriptor.theming.headingSrcSet?.length ? confDescriptor.theming.headingSrcSet.map(entry => `${entry.url} ${entry.descriptor}`).join(', ') : ''"
+  />
   <span class="schedule-talk-event-title">{{confDescriptor.headingTitle}}</span>
 
   <schedule-talk v-for="(talk, index) in talks" :key="talk.id.value"

mobile/src/models/VoxxrinEvent.ts

@@ -118,6 +118,7 @@ export function toVoxxrinEventTheme(firestoreTheme: EventTheme): VoxxrinEventThe
             tertiaryContrastRGB: hexToRGB(firestoreTheme.colors.tertiaryContrastHex),
         },
         headingCustomStyles: firestoreTheme.headingCustomStyles,
+        headingSrcSet: firestoreTheme.headingSrcSet,
         customGoogleFontFamilies: firestoreTheme.customGoogleFontFamilies,
     }
 }

shared/event-list.firestore.d.ts

@@ -14,6 +14,7 @@ export type EventTheme = {
       subTitle: string|null,
       banner: string|null,
     }|null,
+    headingSrcSet: Array<{ url: string, descriptor: string }>|null,
     customGoogleFontFamilies: string[]|null
 }