Fix safari issues and move scrollable to own container (#7029)

src/components/media-player/dialog-media-player-browse.ts

@@ -90,14 +90,20 @@ class DialogMediaPlayerBrowse extends LitElement {
           --dialog-content-padding: 0;
         }
 
+        ha-media-player-browse {
+          --media-browser-max-height: 100vh;
+        }
+
         @media (min-width: 800px) {
           ha-dialog {
             --mdc-dialog-max-width: 800px;
             --dialog-surface-position: fixed;
             --dialog-surface-top: 40px;
-            --mdc-dialog-max-height: calc(100% - 72px);
+            --mdc-dialog-max-height: calc(100vh - 72px);
           }
           ha-media-player-browse {
+            position: initial;
+            --media-browser-max-height: 100vh - 72px;
             width: 700px;
           }
         }

src/components/media-player/ha-media-player-browse.ts

@@ -10,11 +10,13 @@ import {
   css,
   CSSResultArray,
   customElement,
+  eventOptions,
   html,
   internalProperty,
   LitElement,
   property,
   PropertyValues,
+  query,
   TemplateResult,
 } from "lit-element";
 import { classMap } from "lit-html/directives/class-map";
@@ -67,12 +69,21 @@ export class HaMediaPlayerBrowse extends LitElement {
   @property({ type: Boolean, attribute: "narrow", reflect: true })
   private _narrow = false;
 
+  @property({ type: Boolean, attribute: "scroll", reflect: true })
+  private _scrolled = false;
+
   @internalProperty() private _loading = false;
 
   @internalProperty() private _error?: { message: string; code: string };
 
   @internalProperty() private _mediaPlayerItems: MediaPlayerItem[] = [];
 
+  @query(".header") private _header?: HTMLDivElement;
+
+  @query(".content") private _content?: HTMLDivElement;
+
+  private _headerOffsetHeight = 0;
+
   private _resizeObserver?: ResizeObserver;
 
   public connectedCallback(): void {
@@ -144,8 +155,8 @@ export class HaMediaPlayerBrowse extends LitElement {
           "no-img": !currentItem.thumbnail,
           "no-dialog": !this.dialog,
         })}"
+        @transitionend=${this._setHeaderHeight}
       >
-        <div class="header-wrapper">
         <div class="header-content">
           ${currentItem.thumbnail
             ? html`
@@ -169,9 +180,7 @@ export class HaMediaPlayerBrowse extends LitElement {
                             .label=${this.hass.localize(
                               `ui.components.media-browser.${this.action}-media`
                             )}
-                              .path=${this.action === "play"
-                                ? mdiPlay
-                                : mdiPlus}
+                            .path=${this.action === "play" ? mdiPlay : mdiPlus}
                           ></ha-svg-icon>
                           ${this.hass.localize(
                             `ui.components.media-browser.${this.action}`
@@ -201,8 +210,7 @@ export class HaMediaPlayerBrowse extends LitElement {
                   `
                 : ""}
             </div>
-              ${currentItem.can_play &&
-              (!currentItem.thumbnail || !this._narrow)
+            ${currentItem.can_play && (!currentItem.thumbnail || !this._narrow)
               ? html`
                   <mwc-button
                     raised
@@ -236,7 +244,7 @@ export class HaMediaPlayerBrowse extends LitElement {
             `
           : ""}
       </div>
-      </div>
+      <div class="content" @scroll=${this._scroll} @touchmove=${this._scroll}>
         ${this._error
           ? html`
               <div class="container">
@@ -311,7 +319,6 @@ export class HaMediaPlayerBrowse extends LitElement {
                             >${child.title}</paper-tooltip
                           >
                         </div>
-
                         <div class="type">
                           ${this.hass.localize(
                             `ui.components.media-browser.content-type.${child.media_content_type}`
@@ -345,7 +352,8 @@ export class HaMediaPlayerBrowse extends LitElement {
                           <mwc-icon-button
                             class="play ${classMap({
                               show:
-                              !mediaClass.show_list_images || !child.thumbnail,
+                                !mediaClass.show_list_images ||
+                                !child.thumbnail,
                             })}"
                             .item=${child}
                             .label=${this.hass.localize(
@@ -354,7 +362,9 @@ export class HaMediaPlayerBrowse extends LitElement {
                             @click=${this._actionClicked}
                           >
                             <ha-svg-icon
-                            .path=${this.action === "play" ? mdiPlay : mdiPlus}
+                              .path=${this.action === "play"
+                                ? mdiPlay
+                                : mdiPlus}
                             ></ha-svg-icon>
                           </mwc-icon-button>
                         </div>
@@ -392,22 +402,32 @@ export class HaMediaPlayerBrowse extends LitElement {
                   : ""}
               </div>
             `}
+      </div>
     `;
   }
 
   protected firstUpdated(): void {
     this._measureCard();
     this._attachObserver();
-
-    this.addEventListener("scroll", this._scroll, { passive: true });
-    this.addEventListener("touchmove", this._scroll, {
-      passive: true,
-    });
   }
 
   protected updated(changedProps: PropertyValues): void {
     super.updated(changedProps);
 
+    if (
+      changedProps.has("_mediaPlayerItems") &&
+      this._mediaPlayerItems.length
+    ) {
+      this._setHeaderHeight();
+    }
+
+    if (
+      changedProps.get("_scrolled") !== undefined &&
+      this._mediaPlayerItems.length
+    ) {
+      this._animateHeaderHeight();
+    }
+
     if (
       !changedProps.has("entityId") &&
       !changedProps.has("mediaContentId") &&
@@ -435,6 +455,33 @@ export class HaMediaPlayerBrowse extends LitElement {
       });
   }
 
+  private async _setHeaderHeight() {
+    await this.updateComplete;
+    const header = this._header;
+    const content = this._content;
+    if (!header || !content) {
+      return;
+    }
+    this._headerOffsetHeight = header.offsetHeight;
+    content.style.marginTop = `${this._headerOffsetHeight}px`;
+    content.style.maxHeight = `calc(var(--media-browser-max-height, 100%) - ${this._headerOffsetHeight}px)`;
+  }
+
+  private _animateHeaderHeight() {
+    let start;
+    const animate = (time) => {
+      if (start === undefined) {
+        start = time;
+      }
+      const elapsed = time - start;
+      this._setHeaderHeight();
+      if (elapsed < 400) {
+        requestAnimationFrame(animate);
+      }
+    };
+    requestAnimationFrame(animate);
+  }
+
   private _actionClicked(ev: MouseEvent): void {
     ev.stopPropagation();
     const item = (ev.currentTarget as any).item;
@@ -482,7 +529,8 @@ export class HaMediaPlayerBrowse extends LitElement {
       return;
     }
 
-    this.scrollTo(0, 0);
+    this._content?.scrollTo(0, 0);
+    this._scrolled = false;
     this._mediaPlayerItems = [...this._mediaPlayerItems, itemData];
   }
 
@@ -509,11 +557,13 @@ export class HaMediaPlayerBrowse extends LitElement {
     this._narrow = (this.dialog ? window.innerWidth : this.offsetWidth) < 450;
   }
 
-  private _scroll(): void {
-    if (this.scrollTop > (this._narrow ? 224 : 125)) {
-      this.setAttribute("scroll", "");
-    } else if (this.scrollTop === 0) {
-      this.removeAttribute("scroll");
+  @eventOptions({ passive: true })
+  private _scroll(ev: Event): void {
+    const content = ev.currentTarget as HTMLDivElement;
+    if (!this._scrolled && content.scrollTop > this._headerOffsetHeight) {
+      this._scrolled = true;
+    } else if (this._scrolled && content.scrollTop < this._headerOffsetHeight) {
+      this._scrolled = false;
     }
   }
 
@@ -571,38 +621,44 @@ export class HaMediaPlayerBrowse extends LitElement {
       haStyle,
       css`
         :host {
-          display: block;
-          overflow-y: auto;
           display: flex;
-          padding: 0px 0px 20px;
           flex-direction: column;
+          position: relative;
         }
 
         ha-circular-progress {
           --mdc-theme-primary: var(--primary-color);
           display: flex;
           justify-content: center;
-          margin-top: 40px;
+          margin: 40px;
         }
 
         .container {
           padding: 16px;
         }
 
+        .content {
+          overflow-y: auto;
+          padding-bottom: 20px;
+          box-sizing: border-box;
+        }
+
         .header {
-          display: block;
+          display: flex;
           justify-content: space-between;
           border-bottom: 1px solid var(--divider-color);
           background-color: var(--card-background-color);
-          position: sticky;
-          position: -webkit-sticky;
+          position: absolute;
           top: 0;
+          right: 0;
+          left: 0;
           z-index: 5;
           padding: 20px 24px 10px;
         }
 
-        .header-wrapper {
-          display: flex;
+        .header_button {
+          position: relative;
+          right: -8px;
         }
 
         .header-content {
@@ -696,8 +752,8 @@ export class HaMediaPlayerBrowse extends LitElement {
             minmax(var(--media-browse-item-size, 175px), 0.1fr)
           );
           grid-gap: 16px;
-          margin: 8px 0px;
           padding: 0px 24px;
+          margin: 8px 0px;
         }
 
         :host([dialog]) .children {

src/panels/media-browser/ha-panel-media-browser.ts

@@ -137,7 +137,7 @@ class PanelMediaBrowser extends LitElement {
           --mdc-theme-primary: var(--app-header-text-color);
         }
         ha-media-player-browse {
-          height: calc(100vh - 84px);
+          height: calc(100vh - 64px);
         }
         :host([narrow]) app-toolbar mwc-button {
           width: 65px;