Various timeline fixes for Safari

src/card.ts

@@ -1749,6 +1749,7 @@ export class FrigateCard extends LitElement {
       this._getConfig().menu.position === 'top';
 
     return html` <ha-card
+      id="ha-card"
       .actionHandler=${actionHandler({
         hasHold: frigateCardHasAction(actions.hold_action),
         hasDoubleClick: frigateCardHasAction(actions.double_tap_action),

src/components/timeline.ts

@@ -1089,7 +1089,7 @@ export class FrigateCardTimelineCore extends LitElement {
       : this._getStartEnd();
 
     const [prefetchStart, prefetchEnd] = this._getPrefetchWindow(windowStart, windowEnd);
-    await this._data.fetchIfNecessary(
+    const fetched = await this._data.fetchIfNecessary(
       this,
       this.hass,
       this.cameras,
@@ -1145,16 +1145,17 @@ export class FrigateCardTimelineCore extends LitElement {
       this._timeline.setWindow(windowStart, windowEnd);
     }
 
-    // Compare last date of fetch with that of inbound view to avoid a loop.
-    // Without this comparison it would be:
+    // Only generate thumbnails if an actual fetch occurred, to avoid getting
+    // stuck in a loop (the subsequent fetches will not actually fetch since the
+    // data will have been cached).
     //
     // Timeline receives a new `view`
     //  -> Events fetched
     //    -> Thumbnails generated
     //      -> New view dispatched (to load thumbnails into outer carousel).
     //  -> New view received ... [loop]
-    const currentContext = this.view.context as TimelineViewContext | null;
-    if (!isEqual(currentContext?.dateFetch, this._data.lastFetchDate)) {
+
+    if (fetched) {
       const thumbnails = this._generateThumbnails();
       this.view
         ?.evolve({

src/scss/card.scss

@@ -57,10 +57,6 @@ div.main::-webkit-scrollbar {
 frigate-card-menu[data-style='hover'] {
   z-index: 1;
   transition: opacity 0.5s ease;
-
-  // In hover mode, the full menu is responsive to the pointer (prevents the
-  // hover menu from disappearing when the cursor is between buttons).
-  pointer-events: all;
 }
 
 .main + frigate-card-menu[data-style='hover'] {
@@ -99,11 +95,14 @@ frigate-card-live.hidden {
 
   // Hide corners on Safari fullscreen.
   border-radius: 0px;
+  margin: 0;
 }
 :host(:fullscreen) ha-card {
   @include fullscreen-ha-card;
 }
-:host(:-webkit-full-screen) ha-card {
+// Need to use an id selector here to overcome card styling that is incorrectly
+// shown in Safari that causes the wrong margin to apply in fullscreen mode.
+:host(:-webkit-full-screen) #ha-card {
   @include fullscreen-ha-card;
 }
 :host(:-moz-full-screen) ha-card {

src/scss/timeline-core.scss

@@ -54,6 +54,14 @@ div.timeline.right-margin {
   background: none;
   color: var(--primary-text-color);
   background-color: var(--primary-color);
+
+  transition: background-color ease-in-out 1s, border-color ease-in-out 1s,
+    box-shadow ease-in-out 1s;
+}
+.vis-item.vis-selected {
+  border-color: var(--accent-color);
+  background-color: var(--accent-color);
+  box-shadow: 0px 0px 5px 1px var(--primary-color);
 }
 .vis-item.vis-background {
   background-color: var(--primary-color);
@@ -92,7 +100,8 @@ div.timeline.right-margin {
 }
 
 // Give an indication that the user can interact with the axes.
-.vis-text.vis-minor, .vis-label {
+.vis-text.vis-minor,
+.vis-label {
   transition: background-color 0.5s ease-out;
 }
 :host([recordings]) .vis-text.vis-minor:hover,