#74 homogeneized talk format duration shown based on talkFormatTitle …

…event descriptor config
voxxrin · Oct 31, 2024 · ecf0d52 · ecf0d52
1 parent 3638656
commit ecf0d52
Show file tree

Hide file tree

Showing 4 changed files with 28 additions and 17 deletions.
diff --git a/mobile/src/components/speaker-card/SpeakerCard.vue b/mobile/src/components/speaker-card/SpeakerCard.vue
@@ -14,9 +14,11 @@
     </div>
     <div class="speakerCard-content">
       <slot name="content"></slot>
-      <div class="bulletTagList" role="list" v-for="categoryCount in categoriesCount" :key="categoryCount.id">
+      <div class="bulletTagList" role="list" v-for="categoryCount in categoriesCount" :key="categoryCount.format.id.value">
         <div class="bulletTag" role="listitem">
-          <span class="bulletTag-nb">{{categoryCount.count}}</span> {{categoryCount.categoryLabel}}
+          <span class="bulletTag-nb">{{categoryCount.count}}</span>
+          {{categoryCount.format.title}}
+          <span v-if="confDescriptor.formattings.talkFormatTitle === 'with-duration'">&nbsp;({{categoryCount.format.hmmDuration}})</span>
         </div>
       </div>
     </div>
@@ -28,18 +30,22 @@
 import {typesafeI18n} from "@/i18n/i18n-vue";
 import {IonText, IonThumbnail} from "@ionic/vue";
 import {businessSharp} from "ionicons/icons";
-import SpeakerResumeTalk from "@/components/speaker-card/SpeakerTalk.vue";
-import {SpeakerId, VoxxrinLineupSpeaker, VoxxrinSimpleSpeaker} from "@/models/VoxxrinSpeaker";
+import {VoxxrinLineupSpeaker, VoxxrinSimpleSpeaker} from "@/models/VoxxrinSpeaker";
 import SpeakerThumbnail from "@/components/speaker/SpeakerThumbnail.vue";
 import {computed, PropType, toValue} from "vue";
 import {VoxxrinConferenceDescriptor} from "@/models/VoxxrinConferenceDescriptor";
+import {VoxxrinTalkFormat} from "@/models/VoxxrinTalkFormat";
 
 const { LL } = typesafeI18n()
 
   const props = defineProps({
     speaker: {
       required: true,
       type: Object as PropType<VoxxrinLineupSpeaker>
+    },
+    confDescriptor: {
+      required: true,
+      type: Object as PropType<VoxxrinConferenceDescriptor>
     }
   })
 
@@ -50,10 +56,13 @@ const { LL } = typesafeI18n()
   const categoriesCount = computed(() => {
     const talks = toValue(props.speaker).talks
     return talks.reduce((categoriesCount, talk) => {
-      categoriesCount[talk.format.id.value] = categoriesCount[talk.format.id.value] || { id: talk.format.id.value, categoryLabel: talk.format.title, count: 0 }
+      categoriesCount[talk.format.id.value] = categoriesCount[talk.format.id.value] || {
+        format: talk.format,
+        count: 0,
+      }
       categoriesCount[talk.format.id.value].count++;
       return categoriesCount;
-    }, {} as Record<string, { id: string, categoryLabel: string, count: number }>)
+    }, {} as Record<string, { format: VoxxrinTalkFormat, count: number }>)
   })
 </script>
 

diff --git a/mobile/src/components/speaker-card/SpeakerTalk.vue b/mobile/src/components/speaker-card/SpeakerTalk.vue
@@ -17,7 +17,10 @@
               {{ talk.track.title }}
             </div>
           </ion-badge>
-          <div class="bulletTag _labelOnly">{{ talk.format.title }} ({{ talk.format.hmmDuration }})</div>
+          <div class="bulletTag _labelOnly">
+            {{ talk.format.title }}
+            <span v-if="confDescriptor.formattings.talkFormatTitle === 'with-duration'">&nbsp;({{talk.format.hmmDuration}})</span>
+          </div>
         </div>
 
         <div class="avatarContainer">
@@ -44,6 +47,7 @@ import SpeakerFavTalkButton from "@/components/speaker-card/SpeakerFavTalkButton
 import {VoxxrinLineupSpeaker, VoxxrinLineupTalk,} from "@/models/VoxxrinSpeaker";
 import SpeakerThumbnail from "@/components/speaker/SpeakerThumbnail.vue";
 import {PropType} from "vue";
+import {VoxxrinConferenceDescriptor} from "@/models/VoxxrinConferenceDescriptor";
 
 const {LL} = typesafeI18n()
 const baseUrl = import.meta.env.BASE_URL;
@@ -57,6 +61,10 @@ const props = defineProps({
     required: true,
     type: Object as PropType<VoxxrinLineupSpeaker>
   },
+  confDescriptor: {
+    required: true,
+    type: Object as PropType<VoxxrinConferenceDescriptor>
+  },
 })
 
 </script>

diff --git a/mobile/src/components/talk-details/TalkDetailsHeader.vue b/mobile/src/components/talk-details/TalkDetailsHeader.vue
@@ -42,7 +42,8 @@
         </ion-badge>
       </div>
       <ion-label :style="{ 'color': talk.format.themeColor }">
-        {{talk.format.title}} ({{talk.format.hmmDuration}})
+        {{talk.format.title}}
+        <span v-if="confDescriptor.formattings.talkFormatTitle === 'with-duration'">&nbsp;({{talk.format.hmmDuration}})</span>
       </ion-label>
     </div>
   </ion-text>

diff --git a/mobile/src/views/event/SpeakersDirectoryPage.vue b/mobile/src/views/event/SpeakersDirectoryPage.vue
@@ -7,10 +7,10 @@
                       @mode-updated="(updatedModeId, previousModeId) => currentMode = updatedModeId as typeof currentMode">
       </toolbar-header>
 
-      <speaker-card v-for="speaker in speakers" @speaker-clicked="openSpeakerDetails($event)" :speaker="speaker" :key="speaker.id.value">
+      <speaker-card v-for="speaker in speakers" @speaker-clicked="openSpeakerDetails($event)" :confDescriptor="confDescriptor" :speaker="speaker" :key="speaker.id.value">
         <template #content="{}">
           <ion-list class="talkResumeList" :style="{ display: currentMode === 'detailed' ? 'block':'none' }">
-            <SpeakerTalk v-for="talk in speaker.talks" :talk="talk" :focused-speaker="speaker" :key="talk.id.value"></SpeakerTalk>
+            <SpeakerTalk v-for="talk in speaker.talks" :talk="talk" :conf-descriptor="confDescriptor" :focused-speaker="speaker" :key="talk.id.value"></SpeakerTalk>
           </ion-list>
         </template>
       </speaker-card>
@@ -26,7 +26,6 @@
 
 <script setup lang="ts">
   import CurrentEventHeader from "@/components/events/CurrentEventHeader.vue";
-  import {useRoute} from "vue-router";
   import {useSharedConferenceDescriptor} from "@/state/useConferenceDescriptor";
   import {typesafeI18n} from "@/i18n/i18n-vue";
   import {managedRef as ref} from "@/views/vue-utils";
@@ -42,16 +41,13 @@
   import SpeakerTalk from "@/components/speaker-card/SpeakerTalk.vue";
 
   const { LL } = typesafeI18n()
-  const route = useRoute();
   const spacedEventIdRef = useCurrentSpaceEventIdRef();
   const {conferenceDescriptor: confDescriptor} = useSharedConferenceDescriptor(spacedEventIdRef);
   const { triggerTabbedPageNavigate } = useTabbedPageNav();
 
   const searchTermsRef = ref<string|undefined>(undefined);
   const { speakers } = useLineupSpeakers(confDescriptor, searchTermsRef)
 
-  const baseUrl = import.meta.env.BASE_URL;
-
   const DEFAULT_MODE = 'compact';
   const currentMode = ref<typeof MODES[number]['id']>(DEFAULT_MODE);
   const MODES = [
@@ -66,9 +62,6 @@
       triggerTabbedPageNavigate(url, "forward", "push");
     }
   }
-
-  function toggleSearchField() {
-  }
 </script>
 
 <style lang="scss" scoped>