Virtualize Media Player Grid #11898
Virtualize Media Player Grid #11898
Conversation
| @@ -147,6 +147,144 @@ export class HaMediaPlayerBrowse extends LitElement { | |||
| } | |||
| } | |||
|
|
|||
| public willUpdate(changedProps: PropertyValues<this>): void { | |||
There was a problem hiding this comment.
I just moved this. Nothing changed
| @@ -25,7 +26,6 @@ import { styleMap } from "lit/directives/style-map"; | |||
| import { fireEvent } from "../../common/dom/fire_event"; | |||
| import { computeRTLDirection } from "../../common/util/compute_rtl"; | |||
| import { debounce } from "../../common/util/debounce"; | |||
| import { getSignedPath } from "../../data/auth"; | |||
There was a problem hiding this comment.
If this is no longer needed it means that thumbnails are broken 🙃
zsarnett
force-pushed
the
media-player-virtualize
branch
from
5314f53
to
29e1436
Compare
build-scripts/webpack.js
Outdated
| @@ -138,6 +138,7 @@ const createWebpackConfig = ({ | |||
| "lit/directives/cache$": "lit/directives/cache.js", | |||
| "lit/directives/repeat$": "lit/directives/repeat.js", | |||
| "lit/polyfill-support$": "lit/polyfill-support.js", | |||
| "@lit-labs/virtualizer/layouts/grid": "lit/polyfill-support.js", | |||
| @@ -101,8 +101,6 @@ export class HaMediaPlayerBrowse extends LitElement { | |||
|
|
|||
| @query(".content") private _content?: HTMLDivElement; | |||
|
|
|||
| @queryAll(".lazythumbnail") private _thumbnails?: HaCard[]; | |||
There was a problem hiding this comment.
Also remove the class from the elements, and remove data-src
There was a problem hiding this comment.
oh I guess this may still be used... for lists
There was a problem hiding this comment.
_intersectionObserver not used anymore?
There was a problem hiding this comment.
no
Im removing it. Playlist can be un virtualized for now
next pr :)
There was a problem hiding this comment.
Or just virtualize the list too, it is easy :-)
| class="img" | ||
| style=${styleMap({ | ||
| backgroundImage: currentItem.thumbnail | ||
| ? `url(${currentItem.thumbnail})` |
There was a problem hiding this comment.
This doesn't work. It needs to be signed. That's what the intersection observer was doing.
There was a problem hiding this comment.
It was also rewriting the brand pictures to support dark mode.
There was a problem hiding this comment.
fixing in next push
Breaking change
Proposed change
Using Lit Virtualizer, make the media player more efficient and less taxing on older devices and mobile apps
Type of change
Example configuration
Additional information
Checklist
If user exposed functionality or configuration variables are added/changed: