From d37f4b08e745bb41e52a95bb7aa2d7061734c842 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Fr=C3=A9d=C3=A9ric=20Camblor?= <fcamblor@gmail.com>
Date: Fri, 8 Nov 2024 03:34:21 +0100
Subject: [PATCH] #74 got rid of speaker-talk component, replacing it with
 schedule-talk component

---
 .../components/speaker-card/SpeakerTalk.vue   | 225 ------------------
 mobile/src/models/VoxxrinSpeaker.ts           |  10 +-
 mobile/src/views/SpeakerDetailsPage.vue       |  30 ++-
 .../src/views/event/SpeakersDirectoryPage.vue |  32 ++-
 4 files changed, 54 insertions(+), 243 deletions(-)
 delete mode 100644 mobile/src/components/speaker-card/SpeakerTalk.vue

diff --git a/mobile/src/components/speaker-card/SpeakerTalk.vue b/mobile/src/components/speaker-card/SpeakerTalk.vue
deleted file mode 100644
index 364b4583..00000000
--- a/mobile/src/components/speaker-card/SpeakerTalk.vue
+++ /dev/null
@@ -1,225 +0,0 @@
-<template>
-  <!-- TODO #74 Dev Resume Card favorites -->
-  <ion-item class="talkResumeCard" :class="{'_has-favorited': false}">
-    <span class="talkResumeCard-line"></span>
-    <div class="talkResumeCard-content">
-      <div class="talkResumeCard-content-description">
-        <ion-text>
-          {{ talk.title }}
-        </ion-text>
-        <talk-favorite-button scope="speaker-talk" v-if="talkNotes" :conf-descriptor="confDescriptor"
-              :user-talk-notes="talkNotes" :talk-stats="talkStats" :local-favorite="localEventTalkNotes"
-              @talk-note-updated="$emit('talk-note-updated', $event)"
-        />
-      </div>
-      <div class="talkResumeCard-footer">
-        <div class="talkResumeCard-footer-left">
-          <ion-badge class="trackBadge">
-            <div class="trackBadge-content">
-              <ion-icon src="/assets/icons/solid/tag.svg"></ion-icon>
-              {{ talk.track.title }}
-            </div>
-          </ion-badge>
-          <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">
-          <div class="avatarGroup" v-if="true">
-            <div class="avatarItem">
-              <speaker-thumbnail size="64px" :is-highlighted="false" :speaker="focusedSpeaker" />
-            </div>
-          </div>
-          <div class="avatarInfos _small">
-            <ion-text class="avatarInfos-subTitle" v-if="talk.otherSpeakers.length > 0">
-              ({{ LL.Talk_additional_speakers({ count: talk.otherSpeakers.length }) }})
-            </ion-text>
-          </div>
-        </div>
-      </div>
-    </div>
-  </ion-item>
-</template>
-
-<script setup lang="ts">
-import {typesafeI18n} from "@/i18n/i18n-vue";
-import {IonBadge, IonText} from "@ionic/vue";
-import {VoxxrinLineupSpeaker, VoxxrinLineupTalk,} from "@/models/VoxxrinSpeaker";
-import SpeakerThumbnail from "@/components/speaker/SpeakerThumbnail.vue";
-import {PropType} from "vue";
-import {VoxxrinConferenceDescriptor} from "@/models/VoxxrinConferenceDescriptor";
-import TalkFavoriteButton from "@/components/talk-card/TalkFavoriteButton.vue";
-import {TalkStats} from "../../../../shared/event-stats";
-import {TalkNote} from "../../../../shared/feedbacks.firestore";
-
-const {LL} = typesafeI18n()
-
-const props = defineProps({
-  talk: {
-    required: true,
-    type: Object as PropType<VoxxrinLineupTalk>
-  },
-  focusedSpeaker: {
-    required: true,
-    type: Object as PropType<VoxxrinLineupSpeaker>
-  },
-  confDescriptor: {
-    required: true,
-    type: Object as PropType<VoxxrinConferenceDescriptor>
-  },
-  talkStats: {
-    required: true,
-    type: Object as PropType<TalkStats|undefined>
-  },
-  talkNotes: {
-    required: true,
-    type: Object as PropType<TalkNote|undefined>
-  },
-  localEventTalkNotes: {
-    required: false,
-    type: Number as PropType<1 | -1 | undefined>,
-    default: undefined,
-  }
-})
-
-defineEmits<{
-  (e: 'talk-note-updated', event: TalkNote): void,
-}>()
-
-</script>
-
-<style lang="scss" scoped>
-.talkResumeCard {
-  --background: transparent;
-  --inner-padding-end: 0;
-  --inner-padding-top: var(--app-gutters-medium);
-  --inner-padding-bottom: var(--app-gutters-medium);
-  overflow: visible;
-
-  @media (prefers-color-scheme: dark) {
-    --border-color: var(--app-dark-contrast);
-  }
-
-  &:last-child {
-    --border-style: none;
-    --inner-padding-bottom: 0;
-  }
-
-  &._has-favorited {
-
-    .talkResumeCard-line {
-      background: var(--voxxrin-event-theme-colors-primary-hex);
-    }
-
-    .talkResumeCard-content {
-      &:before {
-        width: 84px;
-        height: 60%;
-        right: -44px;
-        top: 16px;
-        transform: scale(1);
-        background: linear-gradient(331deg, rgba(var(--voxxrin-event-theme-colors-primary-rgb), 0.8) 30%,
-            rgba(var(--voxxrin-event-theme-colors-primary-rgb), 0.8) 80%);
-        opacity: 1;
-        filter: blur(24px);
-        animation: scale-in-center 0.1s cubic-bezier(0.250, 0.460, 0.450, 0.940) both;
-      }
-
-      &:after {
-        width: 84px;
-        height: 60%;
-        right: -44px;
-        top: 16px;
-        background-image: url('/assets/images/png/texture-favorited.png');
-        background-repeat: no-repeat;
-        background-position: right;
-        background-size: cover;
-        transform: scale(1) translate(0, -50%);;
-        opacity: 0.5;
-        mix-blend-mode: overlay;
-        animation: scale-in-center 0.1s cubic-bezier(0.250, 0.460, 0.450, 0.940) both;
-
-        @media (prefers-color-scheme: dark) {
-          mix-blend-mode: difference;
-        }
-      }
-    }
-  }
-
-  &-line {
-    height: 100%;
-    min-width: 2px;
-    margin-right: var(--app-gutters-medium);
-    border-radius: 4px;
-    background: var(--app-primary);
-
-    @media (prefers-color-scheme: dark) {
-      background: var(--app-white-50);
-    }
-  }
-
-  &-content {
-    position: relative;
-    flex: 1;
-    display: flex;
-    flex-direction: column;
-    align-items: center;
-    gap: var(--app-gutters-small);
-    padding-right: var(--app-gutters-medium);
-    background: var(--app-white);
-
-    @media (prefers-color-scheme: dark) {
-      background: transparent;
-    }
-
-    &:before, &:after {
-      position: absolute;
-      content: '';
-      z-index: 0;
-      pointer-events: none;
-    }
-
-    &-description {
-      display: flex;
-      width: 100%;
-      font-size: 14px;
-      line-height: 1.2;
-      color: var(--app-primary);
-
-      ion-text {
-        flex: 1;
-        line-height: 1.4;
-        padding-right: var(--app-gutters-small);
-
-        @media (prefers-color-scheme: dark) {
-          color: var(--app-white);
-        }
-      }
-    }
-  }
-
-  &-footer {
-    display: flex;
-    align-items: center;
-    justify-content: space-between;
-    width: 100%;
-
-    &-left {
-      display: flex;
-      flex-direction: row;
-      align-items: center;
-      gap: var(--app-gutters-medium)
-    }
-
-    .avatarContainer {
-      gap: var(--app-gutters);
-    }
-
-    .avatarInfos {
-      justify-content: end;
-    }
-  }
-}
-</style>
diff --git a/mobile/src/models/VoxxrinSpeaker.ts b/mobile/src/models/VoxxrinSpeaker.ts
index 4538e907..02bc21d0 100644
--- 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
index 3ada841b..15eca297 100644
--- 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
index 29794933..98f98593 100644
--- 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();