#74 got rid of speaker-talk component, replacing it with schedule-tal…

…k component
voxxrin · Nov 8, 2024 · d37f4b0 · d37f4b0
1 parent c431814
commit d37f4b0
Show file tree

Hide file tree

Showing 4 changed files with 54 additions and 243 deletions.
diff --git a/mobile/src/components/speaker-card/SpeakerTalk.vue b/mobile/src/components/speaker-card/SpeakerTalk.vue
diff --git a/mobile/src/models/VoxxrinSpeaker.ts b/mobile/src/models/VoxxrinSpeaker.ts
@@ -4,7 +4,13 @@ import {Replace} from "../../../shared/type-utils";
 import {LineupSpeaker, LineupTalk} from "../../../shared/event-lineup.firestore";
 import {TalkId} from "@/models/VoxxrinTalk";
 import {RoomId, VoxxrinRoom} from "@/models/VoxxrinRoom";
-import {findRoom, findTalkFormat, findTrack, VoxxrinConferenceDescriptor} from "@/models/VoxxrinConferenceDescriptor";
+import {
+  findRoom,
+  findTalkFormat,
+  findTrack,
+  TalkLanguageCode,
+  VoxxrinConferenceDescriptor
+} from "@/models/VoxxrinConferenceDescriptor";
 import {match, P} from "ts-pattern";
 import {TalkFormatId, VoxxrinTalkFormat} from "@/models/VoxxrinTalkFormat";
 import {TrackId, VoxxrinTrack} from "@/models/VoxxrinTrack";
@@ -21,6 +27,7 @@ export type VoxxrinLineupTalk = Replace<LineupTalk, {
     room: VoxxrinRoom,
   }|undefined,
   otherSpeakers: VoxxrinSimpleSpeaker[],
+  language: TalkLanguageCode,
 }>
 
 export type VoxxrinLineupSpeaker = Replace<LineupSpeaker, {
@@ -60,6 +67,7 @@ export const createVoxxrinSpeakerFromFirestore = (conferenceDescriptor: VoxxrinC
         format,
         track,
         otherSpeakers: firestoreTalk.otherSpeakers.map(sp => toVoxxrinSpeaker(sp)),
+        language: new TalkLanguageCode(firestoreTalk.language),
       };
     })
   }

diff --git a/mobile/src/views/SpeakerDetailsPage.vue b/mobile/src/views/SpeakerDetailsPage.vue
@@ -48,13 +48,24 @@
             </div>
             <div class="sectionBloc" v-if="speaker.talks.length > 0">
               <VoxDivider>{{LL.Speaker_talks()}}</VoxDivider>
-              <speaker-talk v-for="talk in speaker.talks" :key="talk.id.value"
-                  :focused-speaker="speaker" :talk="talk" :conf-descriptor="confDescriptor"
-                  :talk-stats="talkStatsRefByTalkId.get(talk.id.value)"
-                  :talk-notes="userEventTalkNotesRef.get(talk.id.value)"
-                  :local-event-talk-notes="localEventTalkNotesRef.get(talk.id.value)"
-                  @talk-note-updated="userEventTalkNotesRef.set(talk.id.value, $event)"
-              />
+              <schedule-talk v-for="talk in speaker.talks" :key="talk.id.value"
+                             :talk="{ ...talk, speakers: [speaker, ...talk.otherSpeakers] }" :room-id="talk.allocation?.room.id" :talk-stats="talkStatsRefByTalkId.get(talk.id.value)"
+                             :talk-notes="userEventTalkNotesRef.get(talk.id.value)"
+                             @talk-clicked="(clickedTalk) => $emit('talk-clicked', clickedTalk)"
+                             :is-highlighted="(talk, talkNotes) => talkNotes.isFavorite" :conf-descriptor="confDescriptor">
+                <template #upper-right>
+                  <talk-room v-if="talk.allocation" :room="talk.allocation.room" :conf-descriptor="confDescriptor" />
+                </template>
+                <template #footer-actions="{ talkStats, talkNotes }">
+                  <talk-watch-later-button v-if="confDescriptor"
+                                           :conf-descriptor="confDescriptor" :user-talk-notes="talkNotes"
+                                           @talk-note-updated="updatedTalkNote => userEventTalkNotesRef.set(talk.id.value, updatedTalkNote) " />
+                  <talk-favorite-button scope="schedule-talk" v-if="confDescriptor"
+                                        :conf-descriptor="confDescriptor" :user-talk-notes="talkNotes" :talk-stats="talkStats"
+                                        :local-favorite="localEventTalkNotesRef.get(talk.id.value)"
+                                        @talk-note-updated="updatedTalkNote => userEventTalkNotesRef.set(talk.id.value, updatedTalkNote) " />
+                </template>
+              </schedule-talk>
             </div>
 
             <div class="sectionBloc linksInfoSpeaker" v-if="speaker.social.length">
@@ -88,10 +99,13 @@ import {getResolvedEventRootPathFromSpacedEventIdRef, useCurrentSpaceEventIdRef}
 import SpeakerThumbnail from "@/components/speaker/SpeakerThumbnail.vue";
 import SocialMediaIcon from "@/components/ui/SocialMediaIcon.vue";
 import {useLineupSpeaker} from "@/state/useEventSpeakers";
-import SpeakerTalk from "@/components/speaker-card/SpeakerTalk.vue";
 import {useLocalEventTalkFavsStorage, useUserEventTalkNotes} from "@/state/useUserTalkNotes";
 import {computed, toValue} from "vue";
 import {useEventTalkStats} from "@/state/useEventTalkStats";
+import ScheduleTalk from "@/components/talk-card/ScheduleTalk.vue";
+import TalkRoom from "@/components/talk-card/TalkRoom.vue";
+import TalkFavoriteButton from "@/components/talk-card/TalkFavoriteButton.vue";
+import TalkWatchLaterButton from "@/components/talk-card/TalkWatchLaterButton.vue";
 
 const LOGGER = Logger.named("SpeakerDetailsPage");
 

diff --git a/mobile/src/views/event/SpeakersDirectoryPage.vue b/mobile/src/views/event/SpeakersDirectoryPage.vue
@@ -10,13 +10,24 @@
       <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' }">
-            <speaker-talk v-for="talk in speaker.talks" :key="talk.id.value"
-                 :talk="talk" :conf-descriptor="confDescriptor" :focused-speaker="speaker"
-                 :talk-stats="talkStatsRefByTalkId.get(talk.id.value)"
-                 :talk-notes="userEventTalkNotesRef.get(talk.id.value)"
-                 :local-event-talk-notes="localEventTalkNotesRef.get(talk.id.value)"
-                 @talk-note-updated="userEventTalkNotesRef.set(talk.id.value, $event)"
-            />
+            <schedule-talk v-for="talk in speaker.talks" :key="talk.id.value"
+                           :talk="{ ...talk, speakers: [speaker, ...talk.otherSpeakers] }" :room-id="talk.allocation?.room.id" :talk-stats="talkStatsRefByTalkId.get(talk.id.value)"
+                           :talk-notes="userEventTalkNotesRef.get(talk.id.value)"
+                           @talk-clicked="(clickedTalk) => $emit('talk-clicked', clickedTalk)"
+                           :is-highlighted="(talk, talkNotes) => talkNotes.isFavorite" :conf-descriptor="confDescriptor">
+              <template #upper-right>
+                <talk-room v-if="talk.allocation" :room="talk.allocation.room" :conf-descriptor="confDescriptor" />
+              </template>
+              <template #footer-actions="{ talkStats, talkNotes }">
+                <talk-watch-later-button v-if="confDescriptor"
+                                         :conf-descriptor="confDescriptor" :user-talk-notes="talkNotes"
+                                         @talk-note-updated="updatedTalkNote => userEventTalkNotesRef.set(talk.id.value, updatedTalkNote) " />
+                <talk-favorite-button scope="schedule-talk" v-if="confDescriptor"
+                                      :conf-descriptor="confDescriptor" :user-talk-notes="talkNotes" :talk-stats="talkStats"
+                                      :local-favorite="localEventTalkNotesRef.get(talk.id.value)"
+                                      @talk-note-updated="updatedTalkNote => userEventTalkNotesRef.set(talk.id.value, updatedTalkNote) " />
+              </template>
+            </schedule-talk>
           </ion-list>
         </template>
       </speaker-card>
@@ -34,7 +45,7 @@
   import CurrentEventHeader from "@/components/events/CurrentEventHeader.vue";
   import {useSharedConferenceDescriptor} from "@/state/useConferenceDescriptor";
   import {typesafeI18n} from "@/i18n/i18n-vue";
-  import {managedRef as ref} from "@/views/vue-utils";
+  import {managedRef as ref, toManagedRef as toRef} from "@/views/vue-utils";
   import {IonFab, IonFabButton} from "@ionic/vue";
   import {albums, list, ticket} from "ionicons/icons";
   import PoweredVoxxrin from "@/components/ui/PoweredVoxxrin.vue";
@@ -44,11 +55,14 @@
   import ToolbarHeader from "@/components/ui/ToolbarHeader.vue";
   import {getResolvedEventRootPathFromSpacedEventIdRef, useCurrentSpaceEventIdRef} from "@/services/Spaces";
   import {useLineupSpeakers} from "@/state/useEventSpeakers";
-  import SpeakerTalk from "@/components/speaker-card/SpeakerTalk.vue";
   import {useLocalEventTalkFavsStorage, useUserEventTalkNotes} from "@/state/useUserTalkNotes";
   import {computed, toValue} from "vue";
   import {TalkId} from "@/models/VoxxrinTalk";
   import {useEventTalkStats} from "@/state/useEventTalkStats";
+  import ScheduleTalk from "@/components/talk-card/ScheduleTalk.vue";
+  import TalkRoom from "@/components/talk-card/TalkRoom.vue";
+  import TalkFavoriteButton from "@/components/talk-card/TalkFavoriteButton.vue";
+  import TalkWatchLaterButton from "@/components/talk-card/TalkWatchLaterButton.vue";
 
   const { LL } = typesafeI18n()
   const spacedEventIdRef = useCurrentSpaceEventIdRef();