Merge pull request #470 from bcc-code/feature/playback-origin

provide playbackOrigin for CuratedPlaylist, Contributor and Tile

components/DocumentList.vue

@@ -24,6 +24,7 @@ const props = defineProps<{
   pending: boolean;
   useDailyPodcastView?: boolean | undefined;
   showMessageToMobileUsers?: boolean | undefined;
+  origin?: string;
 }>();
 
 const convertModels = (models: IAllDocumentModels[]) => {
@@ -93,6 +94,7 @@ const playItem = (item: TrackModel, group: IDiscoverableGroup) => {
   setQueue(
     items,
     items.findIndex((track) => track.id === item.id),
+    props.origin,
   );
 };
 const { device } = UAParser(navigator.userAgent);
@@ -281,6 +283,7 @@ onMounted(() => {
               :is-track-type-known="true"
               :use-daily-podcast-view="useDailyPodcastView"
               show-thumbnail
+              :origin="props.origin"
               @play-track="playItem(item, group)"
             />
             <GenericListItem

components/EndlessDocumentList.vue

@@ -5,6 +5,7 @@ import { useInfiniteScroll } from "@vueuse/core";
 const props = defineProps<{
   load: (skip: number, take: number) => Promise<IAllDocumentModels[]>;
   useDailyPodcastView?: boolean | undefined;
+  origin?: string;
 }>();
 
 const list = ref<IAllDocumentModels[]>([]);
@@ -62,6 +63,7 @@ watch(reactiveDependencies(), async () => {
       :items="list"
       :pending="false"
       :use-daily-podcast-view="useDailyPodcastView"
+      :origin="origin"
     />
     <ul v-if="loadingMore">
       <li

components/TileItem.vue

@@ -7,12 +7,13 @@ const props = defineProps<{
 }>();
 
 const { setQueue } = useNuxtApp().$mediaPlayer;
+const origin = "Tile";
 
 function playTrack() {
   if (!props.item.track) return;
   if (props.item.lastPositionInMs)
-    setQueue([props.item.track], 0, props.item.lastPositionInMs / 1000);
-  else setQueue([props.item.track]);
+    setQueue([props.item.track], 0, origin, props.item.lastPositionInMs / 1000);
+  else setQueue([props.item.track], 0, origin);
   // ToDo: load linked album (from showAllLink) and add remaining items to the queue
 }
 
@@ -21,7 +22,7 @@ async function shufflePodcast() {
     const tracks = await new PodcastApi().podcastIdShuffleGet({
       id: props.item.shufflePodcastId,
     });
-    setQueue(tracks);
+    setQueue(tracks, 0, origin);
   }
 }
 </script>
@@ -78,7 +79,7 @@ async function shufflePodcast() {
             class="aspect-square p-1 text-xl text-black-1"
           />
         </button>
-        <TrackMenu :track="item.track" class="ml-auto" />
+        <TrackMenu :track="item.track" class="ml-auto" :origin="origin" />
       </div>
     </div>
   </div>

components/media-player/MediaPlayerOpen.vue

@@ -17,6 +17,7 @@ const {
   play,
   pause,
   currentTrack,
+  currentEnrichedTrack,
   currentPosition,
   currentTrackDuration,
   isLoading,
@@ -176,6 +177,7 @@ useDraggable(queueListElement, queue, {
           <TrackMenu
             v-if="currentTrack"
             :track="currentTrack"
+            :origin="currentEnrichedTrack?.originView"
             button-class="rounded-full border border-label-separator p-1.5"
           ></TrackMenu>
         </div>
@@ -222,7 +224,11 @@ useDraggable(queueListElement, queue, {
         </div>
       </div>
       <ul ref="queueListElement" class="px-3 pb-3">
-        <li v-for="(item, i) in queue" :key="item.id" @click="queue.index = i">
+        <li
+          v-for="(item, i) in queue"
+          :key="item.track.id"
+          @click="queue.index = i"
+        >
           <div
             :class="{
               'bg-tint text-black-1 hover:bg-tint': isCurrentTrack(i),
@@ -232,19 +238,19 @@ useDraggable(queueListElement, queue, {
             class="flex cursor-row-resize justify-between gap-2 rounded-xl px-3 py-2 transition-all duration-500 ease-out hover:bg-background-2"
           >
             <div class="truncate">
-              <div>{{ trackTitleField(item) }}</div>
+              <div>{{ trackTitleField(item.track) }}</div>
               <div
                 class="text-sm"
                 :class="isCurrentTrack(i) ? 'text-black-2' : 'text-label-2'"
               >
                 <span>
-                  {{ trackSubtitleField(item) }}
+                  {{ trackSubtitleField(item.track) }}
                 </span>
               </div>
             </div>
 
             <div class="flex items-center justify-between gap-2">
-              <TrackMenu :track="item" />
+              <TrackMenu :track="item.track" :origin="item.originView" />
               <NuxtIcon
                 v-if="isCurrentTrack(i) && status !== MediaPlayerStatus.Stopped"
                 name="icon.playing.animation"

components/track/TrackItem.vue

@@ -14,6 +14,7 @@ const props = withDefaults(
     highlight?: Highlighting | undefined;
     addDropdownItems?: (items: DropdownMenuItem[], track: TrackModel) => void;
     isAlbumKnown?: boolean;
+    origin?: string;
   }>(),
   {
     isAlbumKnown: false,
@@ -199,7 +200,7 @@ const selectedTrack: Ref<TrackModel | null> = ref(null);
           class="rounded-full p-2 opacity-0 hover:bg-label-separator hover:opacity-100 group-hover:opacity-100 group-focus:opacity-100"
           :aria-label="t('track.dropdown.play-next')"
           :title="t('track.dropdown.play-next')"
-          @click="addNext(track)"
+          @click="addNext(track, props.origin)"
           @click.stop
         >
           <NuxtIcon name="icon.play" class="text-2xl" />
@@ -211,6 +212,7 @@ const selectedTrack: Ref<TrackModel | null> = ref(null);
             (isPlaying ? 'text-black-1 hover:text-black-1' : 'text-label-1')
           "
           :add-dropdown-items="props.addDropdownItems"
+          :origin="props.origin"
         />
       </div>
     </div>

components/track/TrackList.vue

@@ -10,12 +10,14 @@ const props = withDefaults(
     albumIsKnown?: boolean;
     showThumbnails?: boolean;
     addDropdownItems?: (items: DropdownMenuItem[], track: TrackModel) => void;
+    origin?: string;
   }>(),
   {
     skeletonCount: 5,
     addDropdownItems: undefined,
     trackTypeIsKnown: undefined,
     albumIsKnown: false,
+    origin: "",
   },
 );
 
@@ -55,7 +57,8 @@ const isTrackTypeKnown = () => {
         :show-thumbnail="showThumbnails"
         :add-dropdown-items="props.addDropdownItems"
         :is-album-known="props.albumIsKnown"
-        @play-track="setQueue(tracks, i)"
+        :origin="props.origin"
+        @play-track="setQueue(tracks, i, props.origin)"
       >
       </TrackItem>
     </template>

components/track/TrackMenu.vue

@@ -15,6 +15,7 @@ const props = withDefaults(
     track: TrackModel;
     buttonClass?: string;
     addDropdownItems?: (items: DropdownMenuItem[], track: TrackModel) => void;
+    origin?: string;
   }>(),
   {
     buttonClass: "",
@@ -35,12 +36,12 @@ const dropdownMenuItemsForTrack = (track: TrackModel) => {
   items.push({
     icon: "icon.play",
     text: t("track.dropdown.play-next"),
-    clickFunction: () => addNext(track),
+    clickFunction: () => addNext(track, props.origin),
   });
   items.push({
     icon: "icon.queue",
     text: t("track.dropdown.add-to-queue"),
-    clickFunction: () => addToQueue(track),
+    clickFunction: () => addToQueue(track, props.origin),
   });
 
   if (track?.meta?.parent?.id) {

pages/index.vue

@@ -11,5 +11,6 @@ const { data: models, pending } = useDiscover({});
     :pending="pending"
     class="mt-6 lg:mt-12"
     show-message-to-mobile-users
+    origin="ExploreNewest"
   ></DocumentList>
 </template>

pages/playlist/contributor/[id]/index.vue

@@ -11,13 +11,14 @@ let tracks: TrackModel[] = [];
 const api = new ContributorApi();
 
 toolbarTitleStore().setReactiveToolbarTitle(() => t("nav.contributor"));
+const origin = computed(() => `Contributor|${contributorId}`);
 
 useHead({
   title: contributor.value?.name || "",
 });
 const onPressPlay = () => {
   if (tracks.length > 0) {
-    setQueue(tracks);
+    setQueue(tracks, 0, origin.value);
   }
 };
 const onPressShuffle = async () => {
@@ -26,7 +27,7 @@ const onPressShuffle = async () => {
       .value;
 
     if (shuffledTracks) {
-      setQueue(shuffledTracks);
+      setQueue(shuffledTracks, 0, origin.value);
     }
   } catch (e) {
     // TODO: Show an error message to the user
@@ -81,6 +82,6 @@ async function load(skip: number, take: number) {
       </template>
     </TrackCollectionHeader>
 
-    <EndlessDocumentList :load="load" />
+    <EndlessDocumentList :load="load" :origin="origin" />
   </div>
 </template>

pages/playlist/curated/[id]/index.vue

@@ -10,15 +10,18 @@ const { data: playlist } = useCuratedPlaylist({ id: playlistId });
 const { data: tracks, pending } = useCuratedPlaylistTracks({ id: playlistId });
 
 const { setQueueShuffled, setQueue } = useNuxtApp().$mediaPlayer;
+const origin = computed(
+  () => `CuratedPlaylist|${playlistId}|${playlist.value?.title}`,
+);
 
 const onPressPlay = () => {
   if (tracks.value) {
-    setQueue(tracks.value);
+    setQueue(tracks.value, 0, origin.value);
   }
 };
 function shuffle() {
   if (tracks.value) {
-    setQueueShuffled(tracks.value);
+    setQueueShuffled(tracks.value, origin.value);
     $appInsights.event("Shuffle Playlist", { playlistId });
   }
 }
@@ -72,6 +75,7 @@ onBeforeMount(() => {
         :skeleton-count="10"
         :show-skeleton="pending"
         :tracks="tracks"
+        :origin="origin"
       />
     </div>
   </div>

pages/search/[[term]].vue

@@ -143,7 +143,7 @@ function playTrack(item: TrackModel) {
   );
   const index = tracks.findIndex((x: TrackModel) => x === item);
   if (highlighting && highlighting.startPositionInSeconds) {
-    setQueue(tracks, index, highlighting.startPositionInSeconds);
+    setQueue(tracks, index, "", highlighting.startPositionInSeconds);
   } else {
     setQueue(tracks, index);
   }

plugins/4.mediaPlayer.ts

@@ -68,24 +68,24 @@ export default defineNuxtPlugin((_) => {
               }
             },
             (play: PlayMeasurement) => {
-              const file = defaultFileForTrack(track);
+              const file = defaultFileForTrack(track.track);
               const trackLength = file?.duration || 0;
               const eventValues = {
                 ...play,
                 personId: userData.personId,
-                trackId: track.id,
+                trackId: track.track.id,
                 percentage:
                   trackLength > 0
                     ? (play.uniqueSecondsListened * 100) / trackLength
                     : 0,
                 trackLength,
-                typeOfTrack: track.subtype,
+                typeOfTrack: track.track.subtype,
                 availability: ResourceAvailability.Remote,
-                albumId: track.parentId,
-                tags: track.tags,
+                albumId: track.track.parentId,
+                tags: track.track.tags,
                 sentAfterStartup: false,
-                language: track.language,
-                playbackOrigin: "",
+                language: track.track.language,
+                playbackOrigin: track.originView,
                 adjustedPlaybackSpeed: 1,
                 client: runtimeConfig.public.systemName,
               };

plugins/mediaPlayer/EnrichedTrackModel.ts

@@ -0,0 +1,12 @@
+import type { TrackModel } from "@bcc-code/bmm-sdk-fetch";
+
+export default class EnrichedTrackModel {
+  constructor(trackModel: TrackModel, originViewModel: string) {
+    this.track = trackModel;
+    this.originView = originViewModel;
+  }
+
+  track: TrackModel;
+
+  originView: string;
+}