Merge pull request #387 from bcc-code/feature/329_transcription-search

render highlighting in search results

components/track/TrackItem.vue

@@ -1,5 +1,5 @@
 <script lang="ts" setup>
-import type { TrackModel } from "@bcc-code/bmm-sdk-fetch";
+import type { Highlighting, TrackModel } from "@bcc-code/bmm-sdk-fetch";
 import { MediaPlayerStatus } from "~/plugins/mediaPlayer/mediaPlayer";
 
 const { t } = useI18n();
@@ -9,6 +9,7 @@ const props = defineProps<{
   track: TrackModel;
   showThumbnail?: boolean;
   isTrackTypeKnown: boolean;
+  highlight?: Highlighting | undefined;
   addDropdownItems?:
     | ((items: DropdownMenuItem[], track: TrackModel) => void)
     | undefined;
@@ -24,6 +25,30 @@ function playTrack() {
   emit("play-track");
 }
 
+function ensureHighlightedWordIsVisible(text: string) {
+  const firstHit = text.indexOf("**|");
+  if (firstHit > 90) {
+    const parts = text.split(" ");
+    let letters = 0;
+    for (let i = 0; i < parts.length; i += 1) {
+      const part = parts[i];
+      if (part === undefined) break;
+      if (letters + part.length > firstHit) {
+        return `...${parts.slice(Math.max(i - 3, 0)).join(" ")}`;
+      }
+      letters += part.length + 1;
+    }
+  }
+  return text;
+}
+
+function adjustHighlightText(highlight: Highlighting) {
+  if (!highlight.text) return "";
+  return ensureHighlightedWordIsVisible(highlight.text)
+    .replaceAll("**|", '<span class="text-utility-auto">')
+    .replaceAll("**/", "</span>");
+}
+
 const isPlaying = computed(() => currentTrack.value?.id === props.track.id);
 
 const selectedTrack: Ref<TrackModel | null> = ref(null);
@@ -104,13 +129,23 @@ const selectedTrack: Ref<TrackModel | null> = ref(null);
           >{{ track.subtype }}</span
         >
       </div>
-      <div v-if="isTrackTypeKnown" class="flex min-w-0 items-center">
+      <div
+        v-if="isTrackTypeKnown"
+        class="flex min-w-0 items-center"
+        :class="highlight ? 'xl:hidden' : ''"
+      >
         <span
           class="truncate"
           :class="isPlaying ? 'text-black-1' : 'text-label-3'"
           >{{ track.meta?.album }}</span
         >
       </div>
+      <div v-if="highlight" class="hidden min-w-0 items-center xl:flex">
+        <span class="flex gap-1 truncate rounded-3xl bg-[#81888F1A] px-3 py-2">
+          <NuxtIcon name="icon.ai" class="text-utility-auto" />
+          <div class="truncate" v-html="adjustHighlightText(highlight)"></div>
+        </span>
+      </div>
       <div class="flex items-center">
         <span class="text-label-3">
           <TimeDuration
@@ -147,6 +182,19 @@ const selectedTrack: Ref<TrackModel | null> = ref(null);
         />
       </div>
     </div>
+
+    <div v-if="highlight" class="relative col-span-full xl:hidden">
+      <div
+        class="col-span-full flex max-w-full gap-1 rounded-3xl bg-[#81888F1A] px-3 py-2"
+      >
+        <NuxtIcon name="icon.ai" class="text-utility-auto" />
+        <div
+          class="truncat max-h-6 overflow-hidden"
+          v-html="adjustHighlightText(highlight)"
+        ></div>
+      </div>
+    </div>
+
     <slot />
 
     <TrackAddToPlaylist

pages/search/[[term]].vue

@@ -1,8 +1,10 @@
 <script lang="ts" setup>
 import { SearchApi, SearchFilter } from "@bcc-code/bmm-sdk-fetch";
 import type {
+  Highlighting,
   IAlbumContributorPodcastPlaylistOrTrack,
   SearchResults,
+  TrackModel,
 } from "@bcc-code/bmm-sdk-fetch";
 
 const router = useRouter();
@@ -32,6 +34,7 @@ const api = new SearchApi();
 
 const results = ref<SearchResults | null>(null);
 const list = ref<IAlbumContributorPodcastPlaylistOrTrack[]>([]);
+const highlightings = ref<Highlighting[]>([]);
 const loading = ref(true);
 const loadingMore = ref(false);
 const fullyLoaded = ref(false);
@@ -53,6 +56,8 @@ async function loadSearchResults() {
       if (data && data.items) {
         results.value = data;
         list.value = list.value.concat(data.items);
+        if (data.highlightings)
+          highlightings.value = highlightings.value.concat(data.highlightings);
         fullyLoaded.value = data.isFullyLoaded === true;
       }
       loadingMore.value = false;
@@ -72,6 +77,7 @@ onMounted(() => {
     async () => {
       results.value = null;
       list.value = [];
+      highlightings.value = [];
       if (searchTerm.value === "") {
         loading.value = false;
         return;
@@ -124,6 +130,20 @@ const tabs = [
 ] as const;
 
 const { setQueue } = useNuxtApp().$mediaPlayer;
+
+function selectHighlighting(trackId: number) {
+  const test = highlightings.value.find((x) => x.id === `track_${trackId}`);
+  return test;
+}
+
+function playTrack(item: TrackModel) {
+  const highlighting = selectHighlighting(item.id);
+  if (highlighting && highlighting.startPositionInSeconds) {
+    setQueue([item], 0, highlighting.startPositionInSeconds);
+  } else {
+    setQueue([item]);
+  }
+}
 </script>
 
 <template>
@@ -197,7 +217,8 @@ const { setQueue } = useNuxtApp().$mediaPlayer;
                 :track="item"
                 :is-track-type-known="true"
                 show-thumbnail
-                @play-track="setQueue([item])"
+                :highlight="selectHighlighting(item.id)"
+                @play-track="playTrack(item)"
               />
               <GenericListItem
                 v-else-if="item.type === 'contributor'"

plugins/mediaPlayer/mediaPlayer.ts

@@ -34,7 +34,11 @@ export interface MediaPlayer {
   currentTrack: ComputedRef<UnwrapRef<TrackModel> | undefined>;
   currentPosition: Ref<number>;
   currentTrackDuration: ComputedRef<number>;
-  setQueue: (queue: TrackModel[], index?: number) => void;
+  setQueue: (
+    queue: TrackModel[],
+    index?: number,
+    startPosition?: number | null,
+  ) => void;
   setQueueShuffled: (queue: TrackModel[]) => void;
   addToQueue: (track: TrackModel) => void;
   addNext: (track: TrackModel) => void;
@@ -219,7 +223,12 @@ export const initMediaPlayer = (
     continuePlayingNextIfEnded();
   }
 
-  function setQueue(_queue: TrackModel[], index = 0): void {
+  function setQueue(
+    _queue: TrackModel[],
+    index = 0,
+    startPosition: number | null = null,
+  ): void {
+    if (startPosition != null) nextStartPosition = startPosition;
     queue.value = new Queue(_queue, index);
   }