From b01ee571f6248ac3d49bb49de734fcbd1c7d871b Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Fr=C3=A9d=C3=A9ric=20Camblor?= <fcamblor@gmail.com>
Date: Sat, 6 Apr 2024 15:05:55 +0200
Subject: [PATCH] #79 displaying *unknown* room capacity indicator so that we
 show an indicator on every talks within a timeslot, regardless if we got an
 indication (or not)

fixup! #79 refactored room-capacity-indicator component in order to centralize level properties
---
 .../src/functions/http/event/roomStats.ts     |   5 +-
 mobile/package-lock.json                      |   8 +-
 mobile/package.json                           |   2 +-
 .../rooms/RoomCapacityIndicator.vue           | 189 ++++++++++++------
 .../src/components/talk-card/ScheduleTalk.vue |   7 +-
 .../timeslots/TimeslotsIterator.vue           |  33 ++-
 mobile/src/i18n/en/index.ts                   |   1 +
 mobile/src/i18n/i18n-types.ts                 |   8 +
 mobile/src/models/VoxxrinSchedule.ts          |  44 +++-
 mobile/src/state/useCurrentClock.ts           |   7 +-
 mobile/src/views/TalkDetailsPage.vue          |   2 +-
 mobile/src/views/event/FavoritesPage.vue      |   4 +-
 mobile/src/views/event/SchedulePage.vue       |   6 +-
 shared/constants/shared-constants.utils.ts    |   4 +
 14 files changed, 227 insertions(+), 93 deletions(-)
 create mode 100644 shared/constants/shared-constants.utils.ts

diff --git a/cloud/functions/src/functions/http/event/roomStats.ts b/cloud/functions/src/functions/http/event/roomStats.ts
index 08358d66..6507c5fb 100644
--- a/cloud/functions/src/functions/http/event/roomStats.ts
+++ b/cloud/functions/src/functions/http/event/roomStats.ts
@@ -10,6 +10,7 @@ import {RoomsStats, RoomStats} from "../../../../../../shared/event-stats";
 import {db} from "../../../firebase";
 
 import {toValidFirebaseKey} from "../../../../../../shared/utilities/firebase.utils";
+ import {TALK_COMPLETION_THRESHOLD} from "../../../../../../shared/constants/shared-constants.utils";
 
 
 export async function provideRoomsStats(response: Response, pathParams: {eventId: string}, queryParams: {token: string}, body: {
@@ -114,10 +115,6 @@ async function updateRoomStatsFor(params: { eventId: string, timeslottedTalks: T
 }
 
 function maxTalkCompletionTimestampToBeConsideredACandidateForCapacityFillingRatio(talk: TimeslottedTalk) {
-  // If room capacity is provided after 85% of current talk duration, it means it should
-  // be linked to next talk (this can happen when talk ending is earlier than expected)
-  const TALK_COMPLETION_THRESHOLD = 0.85
-
   const startTimestamp = Date.parse(talk.start)
   const talkDuration = Date.parse(talk.end) - startTimestamp
   return (startTimestamp + (TALK_COMPLETION_THRESHOLD * talkDuration))
diff --git a/mobile/package-lock.json b/mobile/package-lock.json
index b580eddc..ca0f7302 100644
--- a/mobile/package-lock.json
+++ b/mobile/package-lock.json
@@ -26,7 +26,7 @@
         "p-queue": "8.0.1",
         "swiper": "11.0.2",
         "temporal-polyfill": "0.1.1",
-        "ts-pattern": "4.2.2",
+        "ts-pattern": "5.1.0",
         "typesafe-i18n": "5.24.3",
         "vue": "3.3.4",
         "vue-router": "4.1.6",
@@ -10501,9 +10501,9 @@
       }
     },
     "node_modules/ts-pattern": {
-      "version": "4.2.2",
-      "resolved": "https://registry.npmjs.org/ts-pattern/-/ts-pattern-4.2.2.tgz",
-      "integrity": "sha512-qzJMo2pbkUJWusRH5o8xR+xogn6RmvViyUgwBFTtRENLse470clCGjHDf6haWGZ1AOmk8XkEohUoBW8Uut6Scg=="
+      "version": "5.1.0",
+      "resolved": "https://registry.npmjs.org/ts-pattern/-/ts-pattern-5.1.0.tgz",
+      "integrity": "sha512-sULbgZDTXrcr6WMeuR8gPb+dvNN/fNpxE8GHfosFHPJRPuxHVNtGcEiiNuQa6nxu40/dY6xYdTJmc7MG3w8B5g=="
     },
     "node_modules/tslib": {
       "version": "2.6.2",
diff --git a/mobile/package.json b/mobile/package.json
index 05ed4258..aae4d6b9 100644
--- a/mobile/package.json
+++ b/mobile/package.json
@@ -42,7 +42,7 @@
     "p-queue": "8.0.1",
     "swiper": "11.0.2",
     "temporal-polyfill": "0.1.1",
-    "ts-pattern": "4.2.2",
+    "ts-pattern": "5.1.0",
     "typesafe-i18n": "5.24.3",
     "vue": "3.3.4",
     "vue-router": "4.1.6",
diff --git a/mobile/src/components/rooms/RoomCapacityIndicator.vue b/mobile/src/components/rooms/RoomCapacityIndicator.vue
index 271cb658..337e541f 100644
--- a/mobile/src/components/rooms/RoomCapacityIndicator.vue
+++ b/mobile/src/components/rooms/RoomCapacityIndicator.vue
@@ -1,20 +1,15 @@
 <template>
-  <div v-if="enabledRoomStats" class="above-talkCard"
+  <div v-if="capacityStatusRef && roomCapacityIndicatorShownRef" class="above-talkCard"
        :style="{
-          '--lt60-color': '#73a027',
-          '--gt60-lt80-color': '#ff6a00',
-          '--gt80-lt99-color': '#cc0f0f',
-          '--gt99-color': '#cc0f0f',
+          '--status-level1-color': '#73a027',
+          '--status-level2-color': '#ff6a00',
+          '--status-level3-color': '#cc0f0f',
+          '--status-full-color': '#cc0f0f',
+          '--status-unknown-color': '#cc0f0f',
           '--border-radius': bottomRounded ? '12px 12px 12px 12px' : '12px 12px 0px 0px',
-          '--room-stats-lightColor':
-            enabledRoomStats.capacityFillingRatio < 0.60 ? 'var(--lt60-color)'
-            : enabledRoomStats.capacityFillingRatio < 0.80 ? 'var(--gt60-lt80-color)'
-            : enabledRoomStats.capacityFillingRatio < 0.99 ? 'var(--gt80-lt99-color)' : 'var(--gt99-color)',
-       }"  :class="{ 'level1': enabledRoomStats.capacityFillingRatio < 0.60,
-                'level2':enabledRoomStats.capacityFillingRatio >= 0.60 && enabledRoomStats.capacityFillingRatio < 0.80,
-                'level3': enabledRoomStats.capacityFillingRatio >= 0.80 && enabledRoomStats.capacityFillingRatio < 0.99,
-                'full': enabledRoomStats.capacityFillingRatio >= 0.99}">
-
+          '--room-stats-lightColor': `var(--status-${capacityStatusRef.id}-color)`,
+       }"
+       :class="`status-${capacityStatusRef.id}`">
     <ion-alert
         :is-open="indicatorExplanationPopupOpened"
         @didDismiss="setIndicatorExplanationPopupOpened(false)"
@@ -26,17 +21,17 @@
       <ul class='roomCapacityLegend'>
         <li>
            <ion-icon src='./assets/images/svg/room-gauge-indicator-1.svg' aria-hidden='true'></ion-icon>
-            <div><span class='range lt60'>&lt; 60%</span> ${LL.Still_plenty_of_seats_available()}</div>
+            <div><span class='range level1'>${LEVELS.level1.rangeLabel}</span> ${LL.Still_plenty_of_seats_available()}</div>
         </li>
         <li>
           <ion-icon src='/assets/images/svg/room-gauge-indicator-2.svg' aria-hidden='true'></ion-icon>
-           <div><span class='range gt60_lt80'>60% -&gt; 80%</span> ${LL.Room_is_becoming_crowded()}</li></div>
+           <div><span class='range level2'>${LEVELS.level2.rangeLabel}</span> ${LL.Room_is_becoming_crowded()}</li></div>
         <li>
           <ion-icon src='./assets/images/svg/room-gauge-indicator-3.svg' aria-hidden='true'></ion-icon>
-           <div><span class='range gt80_lt99'>80% -&gt; 99% </span> ${LL.Only_few_seats_left()}</li></div>
+           <div><span class='range level3'>${LEVELS.level3.rangeLabel}</span> ${LL.Only_few_seats_left()}</li></div>
         <li>
           <ion-icon class='full-indicator-legend' src='./assets/images/svg/room-gauge-indicator-full.svg' aria-hidden='true'></ion-icon>
-          <div><span class='range gt99'>&gt;= 99%</span> ${LL.No_seats_available()}</div>
+          <div><span class='range full'>${LEVELS.full.rangeLabel}</span> ${LL.No_seats_available()}</div>
         </li>
       </ul>`"
     ></ion-alert>
@@ -47,15 +42,14 @@
               <path class="level2-segment" d="m17.47,13.43l-6.86-7.44c-.2.2-.4.39-.58.59-2.12,2.28-3.66,4.99-4.53,7.94-.62,2.11-.86,4.3-.75,6.47h7.82c.77-3,2.5-5.69,4.91-7.57Z"/>
               <path class="level3-segment" d="m26.93.07c-3.14-.25-6.3.21-9.23,1.34-.8.31-1.57.67-2.32,1.06l7.78,8.44c3.71-.64,8.09.3,12.66,3.62V2.84C33.11,1.26,30.07.31,26.93.07Z"/>
         </svg>
-        <ion-icon class="full-indicator" :icon="sad" aria-hidden="true"></ion-icon>
+        <ion-icon class="indicator full" :icon="sad" aria-hidden="true"></ion-icon>
+        <ion-icon class="indicator unknown" :icon="help" aria-hidden="true"></ion-icon>
       </span>
     <div class="above-talkCard-txt">
-      <span v-if="enabledRoomStats.capacityFillingRatio < 0.60">{{ LL.Still_plenty_of_seats_available() }}</span>
-      <span v-if="enabledRoomStats.capacityFillingRatio >= 0.60 && enabledRoomStats.capacityFillingRatio < 0.80">{{ LL.Room_is_becoming_crowded() }}</span>
-      <span v-if="enabledRoomStats.capacityFillingRatio >= 0.80 && enabledRoomStats.capacityFillingRatio < 0.99">{{ LL.Only_few_seats_left() }}</span>
-      <span v-if="enabledRoomStats.capacityFillingRatio >= 0.99">{{ LL.No_seats_available() }}</span>
-      <span class="since" v-if="enabledRoomStats.since === 0">{{LL.few_seconds_ago()}}</span>
-      <span class="since" v-if="enabledRoomStats.since !== 0">{{LL.xx_minutes_ago({ minutes: enabledRoomStats.since })}}</span>
+      <span :style="{
+        fontStyle: capacityStatusRef.id === 'unknown' ? 'italic':'normal'
+      }">{{capacityStatusRef.label}}</span>
+      <span v-if="sinceLabelRef.shown" class="since">{{sinceLabelRef.label}}</span>
     </div>
     <ion-button :aria-label="LL.Infos()" class="above-talkCard-info" @click="setIndicatorExplanationPopupOpened(true)">
       <ion-icon :src="'/assets/icons/line/info-circle-line.svg'"></ion-icon>
@@ -66,23 +60,42 @@
 
 <script setup lang="ts">
 import {typesafeI18n} from "@/i18n/i18n-vue";
-import {computed, onMounted, PropType} from "vue";
+import {computed, PropType, toRef, toValue} from "vue";
 import {IonAlert, IonIcon} from "@ionic/vue";
 import {VoxxrinTalk} from "@/models/VoxxrinTalk";
-import {VoxxrinRoomStats} from "@/models/VoxxrinRoomStats";
+import {VoxxrinRoomStats, VoxxrinUnknownRoomStats} from "@/models/VoxxrinRoomStats";
 import {managedRef as ref, useInterval} from "@/views/vue-utils";
-import {Temporal} from "temporal-polyfill";
-import {useCurrentClock} from "@/state/useCurrentClock";
-import {sad} from "ionicons/icons";
 import {watchClock} from "@/state/useCurrentClock";
+import {sad, help} from "ionicons/icons";
+import {match, P} from "ts-pattern";
+import {useSharedConferenceDescriptor} from "@/state/useConferenceDescriptor";
+import {EventId} from "@/models/VoxxrinEvent";
+import {Temporal} from "temporal-polyfill";
 
 const { LL } = typesafeI18n()
 
+const LEVELS = {
+  unknown: { id: 'unknown', rangeLabel: `Unknown`, label: LL.value.Unknown_room_capacity() },
+  level1: { id: 'level1', upperBoundExcluded: 0.60, rangeLabel: `&lt; 60%`, label: LL.value.Still_plenty_of_seats_available() },
+  level2: { id: 'level2', upperBoundExcluded: 0.80, rangeLabel: `60% -&gt; 80%`, label: LL.value.Room_is_becoming_crowded() },
+  level3: { id: 'level3', upperBoundExcluded: 0.99, rangeLabel: `80% -&gt; 99% `, label: LL.value.Only_few_seats_left() },
+  full: { id: 'full', upperBoundIncluded: 1, rangeLabel: `&gt;= 99%`, label: LL.value.No_seats_available() },
+} as const;
+
 const props = defineProps({
+  eventId: {
+    required: true,
+    type: Object as PropType<EventId>
+  },
   talk: {
     required: true,
     type: Object as PropType<VoxxrinTalk>
   },
+  showUnknownCapacity: {
+    required: false,
+    type: Boolean,
+    default: undefined
+  },
   roomStats: {
     required: false,
     type: Object as PropType<VoxxrinRoomStats|undefined>
@@ -96,25 +109,82 @@ const props = defineProps({
 // Updating clockRef only if some roomStats have been made available
 const clockRef = watchClock({freq: 'high-frequency'}, () => null, () => !!props.roomStats);
 
-const enabledRoomStats = computed(() => {
-  const talkRoomId = props.talk.room.id;
-  const talkId = props.talk.id;
-  const roomStats = props.roomStats;
-  const now = clockRef.value
-
-  if(roomStats && now
-      && roomStats.capacityFillingRatio !== 'unknown'
-      && roomStats.roomId.isSameThan(talkRoomId)
-      && roomStats.valid.forTalkId.isSameThan(talkId)
-      && Date.parse(roomStats.valid.until) >= now.epochMilliseconds
-  ){
-    return {
-      ...roomStats,
-      since: Math.max(Math.round(now.toInstant().since(roomStats.persistedAt).total('minutes')), 0)
-    };
-  } else {
+const capacityStatusRef = computed(() => {
+  const maybeRoomStats = props.roomStats,
+    now = toValue(clockRef)
+
+  if(!maybeRoomStats) {
     return undefined;
   }
+
+  const unknownRoomStats: VoxxrinUnknownRoomStats = {
+    ...maybeRoomStats,
+    capacityFillingRatio: "unknown",
+  }
+  const unknownCapacityStatus = { ...unknownRoomStats, ...LEVELS.unknown } as const;
+
+  if(!now || maybeRoomStats.capacityFillingRatio === 'unknown'
+    || Date.parse(maybeRoomStats.valid.until) < now.epochMilliseconds
+  ) {
+
+    return unknownCapacityStatus;
+  }
+
+  const capacityStatus = match(maybeRoomStats)
+    .with({ capacityFillingRatio: P.number.lt(LEVELS.level1.upperBoundExcluded) }, (roomStats) => ({ ...roomStats, ...LEVELS.level1 } as const))
+    .with({ capacityFillingRatio: P.number.lt(LEVELS.level2.upperBoundExcluded) }, (roomStats) => ({ ...roomStats, ...LEVELS.level2 } as const))
+    .with({ capacityFillingRatio: P.number.lt(LEVELS.level3.upperBoundExcluded) }, (roomStats) => ({ ...roomStats, ...LEVELS.level3 } as const))
+    .with({ capacityFillingRatio: P.number.lte(LEVELS.full.upperBoundIncluded) }, (roomStats) => ({ ...roomStats, ...LEVELS.full } as const))
+    .otherwise((roomStats) => unknownCapacityStatus);
+
+  return capacityStatus;
+})
+
+const sinceLabelRef = computed(() => {
+  const capacityStatus = toValue(capacityStatusRef),
+     now = toValue(clockRef)
+
+  if(!capacityStatus || !now || capacityStatus.id === 'unknown') {
+    return { shown: false } as const;
+  }
+
+  const sinceMinutes = Math.max(Math.round(now.toInstant().since(capacityStatus.persistedAt).total('minutes')), 0)
+
+  return {
+    shown: true,
+    label: sinceMinutes === 0
+      ? LL.value.few_seconds_ago()
+      : LL.value.xx_minutes_ago({minutes: sinceMinutes})
+  } as const;
+})
+
+const { conferenceDescriptor: confDescriptorRef } = useSharedConferenceDescriptor(toRef(() => props.eventId))
+const roomCapacityIndicatorShownRef = computed(() => {
+  const capacityStatus = toValue(capacityStatusRef),
+    showUnknownCapacity = toValue(() => props.showUnknownCapacity),
+    confDescriptor = toValue(confDescriptorRef),
+    now = toValue(clockRef),
+    roomStats = props.roomStats,
+    talkRoomId = props.talk.room.id,
+    talkId = props.talk.id;
+
+  if(!capacityStatus || !confDescriptor || !now || !roomStats
+    || !roomStats.roomId.isSameThan(talkRoomId)
+  ) {
+    return false;
+  }
+
+  if(Temporal.ZonedDateTime.compare(confDescriptor.start, now) !== -1) {
+    // No need to show indicator before the conference starts
+    return false;
+  }
+
+  return match(capacityStatus)
+      .with({ capacityFillingRatio: 'unknown' }, (unknownCapacityStatus) => showUnknownCapacity)
+      .otherwise(knownCapacityStatus =>
+        knownCapacityStatus.valid.forTalkId.isSameThan(talkId)
+        // && now.epochMilliseconds <= Date.parse(knownCapacityStatus.valid.until)
+      )
 })
 
 const indicatorExplanationPopupOpened = ref(false);
@@ -168,10 +238,10 @@ function setIndicatorExplanationPopupOpened(opened: boolean) {
       display: block;
       font-weight: 900;
 
-      &.lt60 { color: #73a027}
-      &.gt60_lt80 {color: #ff6a00}
-      &.gt80_lt99 { color: #cc0f0f}
-      &.gt99 {
+      &.level1 { color: #73a027}
+      &.level2 {color: #ff6a00}
+      &.level3 { color: #cc0f0f}
+      &.full {
         color: var(--app-black);
 
         @media (prefers-color-scheme: dark) {
@@ -234,30 +304,29 @@ function setIndicatorExplanationPopupOpened(opened: boolean) {
     }
   }
 
-  &.full {
+  &.status-full, &.status-unknown {
     svg {
       display: none;
     }
-
-    .full-indicator {
-      display: block;
-    }
   }
-  &.level3 {
+  &.status-full .full.indicator, &.status-unknown .unknown.indicator {
+    display: block;
+  }
+  &.status-level3 {
     .level3-segment, .level2-segment, .level1-segment {
       fill: var(--app-red);
       fill-opacity: 1;
     }
     .above-talkCard-bg { background: url('/assets/images/jpg/room-capacity-3.jpg');}
   }
-  &.level2 {
+  &.status-level2 {
     .level2-segment, .level1-segment {
       fill: var(--app-yellow);
       fill-opacity: 1;
     }
     .above-talkCard-bg { background: url('/assets/images/jpg/room-capacity-2.jpg');}
   }
-  &.level1 {
+  &.status-level1 {
     .level1-segment {
       fill: var(--app-green);
       fill-opacity: 1;
@@ -270,7 +339,7 @@ function setIndicatorExplanationPopupOpened(opened: boolean) {
     display: flex;
     z-index: 1;
 
-    .full-indicator {
+    .indicator {
       display: none;
       color: var(--app-white);
       font-size: 28px;
diff --git a/mobile/src/components/talk-card/ScheduleTalk.vue b/mobile/src/components/talk-card/ScheduleTalk.vue
index 93a3c9ef..498e742e 100644
--- a/mobile/src/components/talk-card/ScheduleTalk.vue
+++ b/mobile/src/components/talk-card/ScheduleTalk.vue
@@ -1,6 +1,6 @@
 <template>
   <div class="talkItemContainer">
-    <room-capacity-indicator v-if="!!roomStats" :talk="talk" :room-stats="roomStats" />
+    <room-capacity-indicator v-if="!!roomStats" :event-id="eventId" :talk="talk" :room-stats="roomStats" :show-unknown-capacity="isUpcomingTalk" />
     <ion-card class="talkCard"
               v-if="talkNotes"
               :class="{ container: true, '_is-highlighted': isHighlighted(talk, talkNotes), '_has-favorited': talkNotes.isFavorite, '_has-to-watch-later': talkNotes.watchLater }"
@@ -118,6 +118,11 @@ const props = defineProps({
       required: false,
       type: Object as PropType<VoxxrinRoomStats|undefined>
   },
+  isUpcomingTalk: {
+      required: false,
+      type: Boolean,
+      default: undefined
+  },
   talkNotes: {
       required: false,
       type: Object as PropType<TalkNote|undefined>
diff --git a/mobile/src/components/timeslots/TimeslotsIterator.vue b/mobile/src/components/timeslots/TimeslotsIterator.vue
index 8d2515e1..aa9508dc 100644
--- a/mobile/src/components/timeslots/TimeslotsIterator.vue
+++ b/mobile/src/components/timeslots/TimeslotsIterator.vue
@@ -2,6 +2,7 @@
   <slot name="iterator" :timeslot="timeslot" :index="index"
         v-for="(timeslot, index) in timeslotsRef" :key="timeslot.id.value"
         :progress="progressesByTimeslotId.get(timeslot.id.value)"
+        :upcomingRawTalkIds="upcomingRawTalkIdsRef"
   />
 
   <no-results v-if="searchTerms && !timeslotsRef.length" illu-path="images/svg/illu-no-results-talk.svg">
@@ -16,17 +17,20 @@ import {VoxxrinConferenceDescriptor} from "@/models/VoxxrinConferenceDescriptor"
 import {DayId} from "@/models/VoxxrinDay";
 import {LabelledTimeslotWithFeedback, useLabelledTimeslotWithFeedbacks} from "@/state/useSchedule";
 import {
-    getTimeslotLabel,
-    getTimeslotTimingProgress, TimeslotTimingProgress, toFilteredLabelledTimeslotWithFeedback,
-    VoxxrinDailySchedule,
-    VoxxrinScheduleTimeSlot
+  getTemporallyUpcomingTalkIds,
+  getTimeslotLabel,
+  getTimeslotTimingProgress, TimeslotTimingProgress, toFilteredLabelledTimeslotWithFeedback,
+  VoxxrinDailySchedule,
+  VoxxrinScheduleTimeSlot
 } from "@/models/VoxxrinSchedule";
 import {useUserFeedbacks} from "@/state/useUserFeedbacks";
-import {useCurrentClock} from "@/state/useCurrentClock";
+import {useCurrentClock, watchClock} from "@/state/useCurrentClock";
 import {useInterval} from "@/views/vue-utils";
 import {PERF_LOGGER, Logger} from "@/services/Logger";
 import NoResults from "@/components/ui/NoResults.vue";
 import {typesafeI18n} from "@/i18n/i18n-vue";
+import {Temporal} from "temporal-polyfill";
+import {TALK_COMPLETION_THRESHOLD} from "../../../../shared/constants/shared-constants.utils";
 
 const LOGGER = Logger.named("TimeslotIterator");
 
@@ -112,17 +116,24 @@ function recomputeMissingFeedbacksList() {
     });
 }
 
+const upcomingRawTalkIdsRef = ref([] as string[])
 const progressesByTimeslotId = ref(new Map<string, TimeslotTimingProgress>())
-function refreshTimeslotProgresses() {
-    const timeslots = toValue(timeslotsRef);
-    const now = useCurrentClock().zonedDateTimeISO()
+function refreshTimeslotProgresses(timeslots: LabelledTimeslotWithFeedback[], now: Temporal.ZonedDateTime) {
     timeslots.forEach(timeslot => {
         progressesByTimeslotId.value.set(timeslot.id.value, getTimeslotTimingProgress(timeslot, now))
     })
+
+    const upcomingTalkIds = getTemporallyUpcomingTalkIds(timeslots, now, TALK_COMPLETION_THRESHOLD);
+    const upcomingRawTalkIds = Array.from(new Set(upcomingTalkIds.map(id => id.value))).sort()
+    if(upcomingRawTalkIds.join(",") !== upcomingRawTalkIdsRef.value.join(",")) {
+      upcomingRawTalkIdsRef.value = upcomingRawTalkIds;
+    }
 }
-useInterval(() => refreshTimeslotProgresses(), {freq:"high-frequency"}, { immediate: true });
-watch([timeslotsRef], ([timeslots]) => {
-    refreshTimeslotProgresses();
+const nowRef = watchClock({ freq: "high-frequency" })
+watch([timeslotsRef, nowRef], ([timeslots, now]) => {
+  if(now) {
+    refreshTimeslotProgresses(timeslots, now);
+  }
 })
 
 </script>
diff --git a/mobile/src/i18n/en/index.ts b/mobile/src/i18n/en/index.ts
index c61486ad..46257d50 100644
--- a/mobile/src/i18n/en/index.ts
+++ b/mobile/src/i18n/en/index.ts
@@ -126,6 +126,7 @@ const en = {
   Room_is_becoming_crowded: "Room is becoming crowded",
   Only_few_seats_left: "Only few seats left",
   No_seats_available: "No seats available",
+  Unknown_room_capacity: "No room capacity provided yet",
   xx_minutes_ago: "{minutes:number} minute{{minutes:s}} ago",
   few_seconds_ago: "Few seconds ago",
   How_is_room_capacity_indicator_calculated: "How is Room Capacity indicator calculated ?",
diff --git a/mobile/src/i18n/i18n-types.ts b/mobile/src/i18n/i18n-types.ts
index bc3e2022..41745a65 100644
--- a/mobile/src/i18n/i18n-types.ts
+++ b/mobile/src/i18n/i18n-types.ts
@@ -518,6 +518,10 @@ type RootTranslation = {
 	 * N​o​ ​s​e​a​t​s​ ​a​v​a​i​l​a​b​l​e
 	 */
 	No_seats_available: string
+	/**
+	 * N​o​ ​r​o​o​m​ ​c​a​p​a​c​i​t​y​ ​p​r​o​v​i​d​e​d​ ​y​e​t
+	 */
+	Unknown_room_capacity: string
 	/**
 	 * {​m​i​n​u​t​e​s​}​ ​m​i​n​u​t​e​{​{​s​}​}​ ​a​g​o
 	 * @param {number} minutes
@@ -1038,6 +1042,10 @@ export type TranslationFunctions = {
 	 * No seats available
 	 */
 	No_seats_available: () => LocalizedString
+	/**
+	 * No room capacity provided yet
+	 */
+	Unknown_room_capacity: () => LocalizedString
 	/**
 	 * {minutes} minute{{s}} ago
 	 */
diff --git a/mobile/src/models/VoxxrinSchedule.ts b/mobile/src/models/VoxxrinSchedule.ts
index 93290578..54f5f907 100644
--- a/mobile/src/models/VoxxrinSchedule.ts
+++ b/mobile/src/models/VoxxrinSchedule.ts
@@ -1,8 +1,8 @@
 import {
-    BreakTimeSlot,
-    DailySchedule,
-    TalksTimeSlot,
-    TimeSlotBase
+  BreakTimeSlot,
+  DailySchedule,
+  TalksTimeSlot,
+  TimeSlotBase
 } from "../../../shared/daily-schedule.firestore";
 import {
     createVoxxrinTalkFromFirestore, filterTalksMatching, TalkId,
@@ -76,6 +76,42 @@ export function getTimeslotTimingProgress(timeslot: VoxxrinScheduleTimeSlot, now
         })
 }
 
+export function getRoomsTalksSchedule(timeslots: VoxxrinScheduleTimeSlot[]) {
+  const perRoomIdTalks = new Map<string, Array<{ talk: VoxxrinTalk, timeslot: VoxxrinScheduleTalksTimeSlot }>>()
+
+  // Important note: we consider timeslots are sorted (in chronological order)
+  // and thus are considering that talks per room will (implicitely) use this same chronological ordering
+  for(const timeslot of timeslots) {
+    if(timeslot.type === 'talks') {
+      for(const talk of timeslot.talks) {
+        perRoomIdTalks.set(talk.room.id.value, (perRoomIdTalks.get(talk.room.id.value) || []).concat({ talk, timeslot }))
+      }
+    }
+  }
+
+  return perRoomIdTalks;
+}
+
+export function getTemporallyUpcomingTalkIds(timeslots: VoxxrinScheduleTimeSlot[], now: Temporal.ZonedDateTime, talkCompletionThreshold: number = 1.0): TalkId[] {
+  const perRoomIdTalksSchedule = getRoomsTalksSchedule(timeslots)
+
+  const roomIds = Array.from(
+      perRoomIdTalksSchedule.keys()
+    ).sort() // Being deterministic on room ordering is important (for caching purposes)
+
+  return roomIds.reduce((upcomingTalkIds, roomId) => {
+    const ongoingOrUpcomingTalks = perRoomIdTalksSchedule.get(roomId)!.filter(talkAndTimeslot => {
+      const talkDuration = talkAndTimeslot.timeslot.end.epochMilliseconds - talkAndTimeslot.timeslot.start.epochMilliseconds
+      return now.epochMilliseconds < talkAndTimeslot.timeslot.start.epochMilliseconds + talkDuration*talkCompletionThreshold
+    })
+
+    if(ongoingOrUpcomingTalks.length) {
+      upcomingTalkIds.push(ongoingOrUpcomingTalks[0].talk.id);
+    }
+    return upcomingTalkIds;
+  }, [] as TalkId[])
+}
+
 export function getTimeslotLabel(timeslot: VoxxrinScheduleTimeSlot) {
     const start = formatHourMinutes(timeslot.start)
     const end = formatHourMinutes(timeslot.end)
diff --git a/mobile/src/state/useCurrentClock.ts b/mobile/src/state/useCurrentClock.ts
index cf6ac417..9cf14cfb 100644
--- a/mobile/src/state/useCurrentClock.ts
+++ b/mobile/src/state/useCurrentClock.ts
@@ -3,7 +3,7 @@ import {ISODatetime} from "../../../shared/type-utils";
 import {match, P} from "ts-pattern";
 import {Logger} from "@/services/Logger";
 import {useInterval, UseIntervalDurationOpts} from "@/views/vue-utils";
-import {ref} from "vue";
+import {computed, ref, toValue} from "vue";
 
 const LOGGER = Logger.named("useCurrentClock");
 
@@ -30,7 +30,7 @@ export function watchClock(
   frequency: UseIntervalDurationOpts,
   callback: (datetime: Temporal.ZonedDateTime) => void = () => null,
   updatePredicate: () => boolean = () => true
-): Readonly<typeof highFrequencyNowRef> {
+) {
   const clockRef = ref<Temporal.ZonedDateTime|undefined>(undefined)
   useInterval(() => {
     if(updatePredicate()) {
@@ -39,7 +39,8 @@ export function watchClock(
     }
   }, frequency, { immediate: true })
 
-  return clockRef;
+  // returning a readonly ref
+  return computed(() => toValue(clockRef));
 }
 
 export async function overrideCurrentClock(clock: Clock, callback: (() => Promise<void>)|undefined) {
diff --git a/mobile/src/views/TalkDetailsPage.vue b/mobile/src/views/TalkDetailsPage.vue
index f67183e9..ab05fe4f 100644
--- a/mobile/src/views/TalkDetailsPage.vue
+++ b/mobile/src/views/TalkDetailsPage.vue
@@ -32,7 +32,7 @@
       </ion-header>
 
       <talk-details-header :conf-descriptor="confDescriptor" :talk="detailedTalk">
-        <room-capacity-indicator :talk="detailedTalk" :room-stats="firestoreRoomStatsRef" :bottom-rounded="true" />
+        <room-capacity-indicator :event-id="eventId" :talk="detailedTalk" :room-stats="firestoreRoomStatsRef" :bottom-rounded="true" :show-unknown-capacity="false" />
       </talk-details-header>
 
       <div class="talkDetails-tags" v-if="detailedTalk?.tags.length">
diff --git a/mobile/src/views/event/FavoritesPage.vue b/mobile/src/views/event/FavoritesPage.vue
index 22a043a5..b11d894f 100644
--- a/mobile/src/views/event/FavoritesPage.vue
+++ b/mobile/src/views/event/FavoritesPage.vue
@@ -17,7 +17,7 @@
         <timeslots-iterator :conf-descriptor="confDescriptor" :day-id="selectedDayId"
                             :daily-schedule="currentSchedule"
                             @timeslots-list-updated="timeslots => expandedTimeslotIds = timeslots.map(t => t.id.value)">
-          <template #iterator="{ timeslot, progress }">
+          <template #iterator="{ timeslot, progress, upcomingRawTalkIds }">
             <time-slot-section :timeslot="timeslot" :conf-descriptor="confDescriptor">
               <template #section-content>
                 <schedule-break v-if="timeslot.type==='break'" :conf-descriptor="confDescriptor" :talk-break="timeslot.break"></schedule-break>
@@ -29,7 +29,7 @@
                     <template #talk="{ talk }">
                       <schedule-talk :talk="talk" :talk-stats="talkStatsRefByTalkId.get(talk.id.value)" :talk-notes="userEventTalkNotesRef.get(talk.id.value)"
                                      :is-highlighted="(talk, talkNotes) => talkNotes.isFavorite" :conf-descriptor="confDescriptor"
-                                     :room-stats="roomsStatsRefByRoomId?.[talk.room.id.value]"
+                                     :room-stats="roomsStatsRefByRoomId?.[talk.room.id.value]" :is-upcoming-talk="upcomingRawTalkIds.includes(talk.id.value)"
                                      @talkClicked="openTalkDetails($event)" >
                         <template #upper-right="{ talk }">
                           <div class="room" v-if="confDescriptor?.features.roomsDisplayed">
diff --git a/mobile/src/views/event/SchedulePage.vue b/mobile/src/views/event/SchedulePage.vue
index effd7c61..1c288154 100644
--- a/mobile/src/views/event/SchedulePage.vue
+++ b/mobile/src/views/event/SchedulePage.vue
@@ -45,7 +45,7 @@
                             :daily-schedule="currentSchedule" :search-terms="searchTermsRef"
                             @timeslots-list-updated="(displayedTimeslots) => displayedTimeslotsRef = displayedTimeslots"
                             @missing-feedback-past-timeslots-updated="updatedMissingTimeslots => missingFeedbacksPastTimeslots = updatedMissingTimeslots">
-          <template #iterator="{ timeslot, index: timeslotIndex, progress }">
+          <template #iterator="{ timeslot, index: timeslotIndex, progress, upcomingRawTalkIds }">
             <time-slot-accordion
                 :animation-delay="timeslotIndex*TimeslotAnimations.ANIMATION_BASE_DELAY.total('milliseconds')"
                 :timeslot-feedback="timeslot.feedback" :timeslot="timeslot" :conf-descriptor="confDescriptor"
@@ -59,7 +59,9 @@
                                               :talks="timeslot.talks">
                   <template #talk="{ talk }">
                     <ion-item class="listTalks-item" role="listitem">
-                      <schedule-talk :talk="talk" :talk-stats="talkStatsRefByTalkId.get(talk.id.value)" :room-stats="roomsStatsRefByRoomId?.[talk.room.id.value]" :talk-notes="userEventTalkNotesRef.get(talk.id.value)" @talkClicked="openTalkDetails($event)" :is-highlighted="(talk, talkNotes) => talkNotes.isFavorite" :conf-descriptor="confDescriptor">
+                      <schedule-talk :talk="talk" :talk-stats="talkStatsRefByTalkId.get(talk.id.value)"
+                                     :room-stats="roomsStatsRefByRoomId?.[talk.room.id.value]" :is-upcoming-talk="upcomingRawTalkIds.includes(talk.id.value)"
+                                     :talk-notes="userEventTalkNotesRef.get(talk.id.value)" @talkClicked="openTalkDetails($event)" :is-highlighted="(talk, talkNotes) => talkNotes.isFavorite" :conf-descriptor="confDescriptor">
                         <template #upper-right="{ talk }">
                           <talk-room :talk="talk" :conf-descriptor="confDescriptor" />
                         </template>
diff --git a/shared/constants/shared-constants.utils.ts b/shared/constants/shared-constants.utils.ts
new file mode 100644
index 00000000..9145e5da
--- /dev/null
+++ b/shared/constants/shared-constants.utils.ts
@@ -0,0 +1,4 @@
+
+// If room capacity is provided after 85% of current talk duration, it means it should
+// be linked to next talk (this can happen when talk ending is earlier than expected)
+export const TALK_COMPLETION_THRESHOLD = 0.85