Match media direction to timeline.

src/utils/media-to-view.ts

@@ -198,8 +198,9 @@ const executeMediaQueryForView = async (
   if (!mediaArray) {
     return null;
   }
-
-  const queryResults = new MediaQueriesResults(mediaArray);
+  // Select the last item by default (which is the most recent).
+  const selectedIndex = mediaArray.length ? mediaArray.length - 1 : undefined;
+  const queryResults = new MediaQueriesResults(mediaArray, selectedIndex);
   let viewerContext: ViewContext | undefined = {};
 
   if (options?.targetTime && options.cameraIDs) {

src/utils/timeline-source.ts

@@ -132,12 +132,13 @@ export class TimelineDataSource {
     }
 
     const mediaArray = await this._cameraManager.executeMediaQueries(hass, eventQueries);
+    const data: FrigateCardTimelineItem[] = []
     for (const media of mediaArray ?? []) {
       const endTime = media.getEndTime();
       const startTime = media.getStartTime();
       const id = media.getID();
       if (id && startTime) {
-        this._dataset.update({
+        data.push({
           id: id,
           group: media.getCameraID(),
           content: '',
@@ -148,6 +149,7 @@ export class TimelineDataSource {
         });
       }
     }
+    this._dataset.update(data);
 
     this._eventRanges.add({
       ...cacheFriendlyWindow,