v4.0.0

💥 This release may require you to update your card configuration significantly 💥

• Visual/UI editor users: Visit the visual editor and click "Upgrade" for an automated upgrade procedure.
• YAML dashboard users: You'll need to manually update your configuration, see wiki page.

Caution: You must use integration version v3.0.0 or later with this card version.

Play favorites!

• Mark events as favorites (indefinite retention):

Timeline Support

• View events & recordings in a timeline:

• Seek to a particular recording on a given camera:

• Seek to a particular time on all cameras:

Scan Mode

• Automatically select cameras where there's action!

Cast Support

• Cast your events direct to your devices:

• Cast the card itself onto a device (e.g. Nest hub):

New native PTZ control

A new native PTZ controller:

Custom media layouts

Change the layout of the media within the card aspect ratio, for example to view a 16:9 camera in a 9:16 configuration focused on the right of the feed:

Before

After

Other improvements

• Support for a 'dark mode'

• Automatically generate submenus from select entities:

• Put thumbnails in a side drawer

... and many more smaller features & improvements.

Changes (since v3.0.0)

💥 Breaking Changes

• Allow elements to be hidden when media is not yet loaded (#791) @dermotduffy
• Change configuration path for Frigate options (#658) @dermotduffy
• Implement auto_play, auto_pause, auto_mute and auto_unmute (#544) @dermotduffy
• Add new lazily unload criteria (#541) @dermotduffy
• Improve menu versatility and add menu alignment (#524) @dermotduffy
• Add gallery support for showing thumbnail details (#513) @dermotduffy

🚀 Features

• Add native PTZ element (#807) @dermotduffy
• Add ability to change media layout (#800) @dermotduffy
• Show still images during live camera load (#793) @dermotduffy
• Allow elements to be hidden when media is not yet loaded (#791) @dermotduffy
• Add Italian language translations (#784) @elax46
• Add support for fetching thumbnails separately (#779) @dermotduffy
• Allow custom action events (e.g. browser_mod) (#771) @dermotduffy
• Add missing pt-br translations (#757) @felipecrs
• Allow finer grained selection of thumbnail controls (#753) @dermotduffy
• Add event starring from the card (#744) @dermotduffy
• Hide buttons that don't work during casting (#720) @dermotduffy
• Improve disconnection/reconnection UX (#713) @dermotduffy
• Add git information to diagnostics (#710) @dermotduffy
• Update pt-BR translations (#695) @felipecrs
• Allow the provided URL to be used as the stock loading image. (#683) @dermotduffy
• Add browser to diagnostics (#681) @dermotduffy
• Include the language in diagnostics output (#677) @dermotduffy
• Deduplicate Frigate cameras on the timeline (support multiple live providers) (#672) @dermotduffy
• Add a new convenience option for a camera to depend on all others (#655) @dermotduffy
• Do not show unavailable media players (#642) @felipecrs
• Add a way to get diagnostics for issue reports. (#634) @dermotduffy
• Add scan mode untrigger timer (#629) @dermotduffy
• Open/close the drawer automatically for mouse users (#628) @dermotduffy
• Add recording support (#619) @dermotduffy
• Fallback non-Frigate cameras to supported views (#596) @felipecrs
• Add Scan mode (Have your card follow the action!) (#606) @dermotduffy
• Improve timeline behavior with non-Frigate cameras (#577) @dermotduffy
• Improve the Frigate-card-on-Chromecast experience (#572) @dermotduffy
• Only show media players capable of casting (#565) @felipecrs
• Add native select/input_select entity support for submenus (#547) @dermotduffy
• Implement auto_play, auto_pause, auto_mute and auto_unmute (#544) @dermotduffy
• Add new lazily unload criteria (#541) @dermotduffy
• Add native cast/media_player support (#535) @dermotduffy
• Allow view to be overridden (e.g. change default card view based on HA state) (#533) @dermotduffy
• Allow use of HA state in Frigate Card Conditions (e.g. for use in configuration overrides) (#530) @dermotduffy
• Support confirmation for actions (#528) @dermotduffy
• Style custom buttons based on actions the button will activate (#527) @dermotduffy
• Improve menu versatility: support ordering and alignment per button (#526) @dermotduffy
• Improve menu versatility and add menu alignment (#524) @dermotduffy
• Allow cameras to link to dependent_cameras to show events from multiple cameras. (#523) @dermotduffy
• Add support for a dark_mode (#515) @dermotduffy
• Add gallery support for showing thumbnail details (#513) @dermotduffy
• Significantly flesh out timeline support (#508) @dermotduffy
• Add favorite icon for clips that are retained (#489) @NickM-27

🐛 Fixes

• Fix drawer open bug in iOS Safari (#804) @dermotduffy
• Drawer handle shouldn't activate card actions (#803) @dermotduffy
• Fix issue with image timers being created recursively (#795) @dermotduffy
• Refactor media load events to add unload support (#794) @dermotduffy
• Fetch thumbnails for next/previous controls. (#787) @dermotduffy
• Fix carousel forgetting its position in certain circumstances. (#776) @dermotduffy
• Restore correct image after browser tab becomes visible (#774) @dermotduffy
• Don't show star icon for recordings (#748) @dermotduffy
• Fix the hover menu styling (again) (#742) @dermotduffy
• Fix thumbnail proportions in Safari (#739) @dermotduffy
• Fix Safari live camera loop bug (#737) @dermotduffy
• Move elements to outside main pane. (#730) @dermotduffy
• Cause a refresh when scan mode untriggers (#725) @dermotduffy
• Various timeline fixes for Safari (#724) @dermotduffy
• Hide elements when messages are displayed. (#716) @dermotduffy
• Messages should respect static dimensions (#715) @dermotduffy
• Don't execute card actions when timeline is dragged (#705) @dermotduffy
• Option overrides are always optional (#702) @dermotduffy
• Don't spam the log if the sensor entity lookup fails (#698) @dermotduffy
• Fix malformed live carousel bug that some users experience (#676) @dermotduffy
• Fix state color in submenu items (#684) @dermotduffy
• Fall back to live if the user changes view from recordings. (#682) @dermotduffy
• Use a proper ISO8601 formatted date to fix the timeline in Safari/iOS. (#675) @dermotduffy
• Don't load cameras where there's an error message being displayed (#674) @dermotduffy
• Allow the image view to trigger a card resize (#673) @dermotduffy
• Fix issue causing image to refetch too frequently (#669) @dermotduffy
• Fix image button upgrade (#665) @dermotduffy
• Fix downloads from the timeline (#660) @dermotduffy
• Don't use wheel plugin when there's only one media item (#627) @dermotduffy
• Fix menu rounded corners (#622) @dermotduffy
• Fix the hover menu (#621) @dermotduffy
• Fix compatability with Frigate 0.11 (#603) @dermotduffy
• Add missing cameras button to editor (#593) @dermotduffy
• Fix malformed Safari live carousel (#592) @dermotduffy
• Reduce thumbnail fetch frequency to prevent Frigate request timeouts (#587) @dermotduffy
• Fix menu alignment for the outside menu style (#585) @dermotduffy
• Prevent drawer from being wider than the card (#578) @dermotduffy
• Fix snapshots on Chromecast (#574) @dermotduffy
• Fix card breakage on Nest hub devices (#569) @dermotduffy
• Ensure a refreshed elements config causes the elements to update (#564) @dermotduffy
• Don't allow elements to overflow (#563) @dermotduffy
• Fix live view for non-Frigate cameras (#562) @dermotduffy
• Don't fetch thumbnails on preloaded camera in the background (#559) @dermotduffy
• fix: replace process.env.NODE_ENV in bundled files (#543) @xiel
• Import full set of entity icons to fix 'checkmark' issue (#539) @dermotduffy
• Remove attempt to serve in prod env (#534) @dermotduffy

🐎 Performance

• Update homeAssistantWSRequest to accept passthrough JSON (#796) @uvjustin
• Embed thumbnails to take advantage of cache (#785) @uvjustin
• Prefetch events from a larger range than the timeline shows (#706) @dermotduffy
• Don't re-render the whole card for conditionState (#685) @dermotduffy
• Use cloneDeep instead of JSON parsing (#550) @dermotduffy

🚨 Testing

• Use a higher port number for devcontainer rollup (#768) @dermotduffy
• Refresh the devcontainer (#756) @felipecrs
• Bump devcontainer submodule (#701) @dermotduffy
• Add docker to the devcontainer (#693) @felipecrs
• Update the card devcontainer dashboard to use storage mode (#697) @dermotduffy
• Implement full-stack Frigate devcontainer (HA -> Frigate -> Integration -> Card) (#691) @felipecrs
• Improve devcontainer to improve the developer experience (#595) @felipecrs

📚 Documentation

• Add new screenshots for PTZ and media layout (#813) @dermotduffy
• Various documentation improvements (#769) @dermotduffy
• Add v4 troubleshooting entry. (#740) @dermotduffy
• Change screenshots to use release branch for serving in HACS (#707) @dermotduffy
• Add Dev Container section on README (#694) @felipecrs
• Add a note that manual menu/submenu positioning is not supported. (#657) @dermotduffy
• Add documentation on Chromecasting (#612) @dermotduffy
• Add new screenshots (#610) @dermotduffy
• Update installation instructions for Lovelace storage mode (#588) @dermotduffy
• Small README fixes (#561) @dermotduffy
• Add fully expanded configuration reference (#560) @dermotduffy
• Add workaround to README for Safari video controls progress bar (#464) @dermotduffy

🔨 Refactoring

• Refactor media load events to add unload support (#794) @dermotduffy
• Reduce boilerplate associated with lit tasks (#788) @dermotduffy
• Complete carousel code refactor (#767) @dermotduffy
• Convert recordings to websocket. (#746) @dermotduffy
• Make error handling and console logging consistent (#704) @dermotduffy
• Clean lit-plugin warnings (#700) @dermotduffy
• Break out triggers into their own configuration section (#656) @dermotduffy
• Refactor aspect-ratio logic (#611) @dermotduffy
• Refactor common.js into multiple files (#584) @dermotduffy
• Remove usage of deprecated attribute (#552) @dermotduffy
• Retire use of @query and use ref univerally (#519) @dermotduffy
• Avoid use of ExtendedHomeAssistant wherever possible. (#518) @dermotduffy

🔥 Removals and Deprecations

• Don't support card-wide actions when a message is displayed (#719) @dermotduffy
• No longer support actions on timeline view. (#718) @dermotduffy

💄 Style

• Rework the error message when entity is unavailable (#773) @dermotduffy
• Move scan mode pulsing border to the outer ha-card (#770) @dermotduffy
• Vertically center the progress indicator (#754) @dermotduffy
• Fix card curve styling issue (#819) @dermotduffy
• Change effect to scale whole thumbnail (#738) @dermotduffy
• Various style and behavior fixes (background colors, scrolling reset) (#736) @dermotduffy
• Fix gallery sizing in Safari (#728) @dermotduffy
• Fix curved borders on Safari (#727) @dermotduffy
• Fit image content to parent size. (#692) @dermotduffy
• Fix webrtc card style issue in Safari (#688) @dermotduffy
• Change styling when recordings are disabled (#664) @dermotduffy
• Small editor spacing fix (#662) @dermotduffy
• Add controls to a submenu in the editor to make it less busy (#659) @dermotduffy
• Improve editor submenu styling (#650) @dermotduffy
• Remove entity id from cast submenu (#641) @felipecrs
• Center text on the recording thumbnail feature item (#640) @dermotduffy
• Fix message color (#635) @dermotduffy
• Minor style changes to gallery (#631) @dermotduffy
• Show thumbnail drawer by default in live and media viewer views (#630) @dermotduffy
• Don't show camera names in the gallery if there's only 1 camera (#575) @dermotduffy
• Change the hover menu to only show up when the mouse is over the menu (#551) @dermotduffy
• For configuration consistency: Change menu subitem 'disabled' => 'enabled' (#548) @dermotduffy

📦 Dependencies

• Bump version to v4.0.0 . (#831) @dermotduffy
• Update dependencies (#820) @dermotduffy
• Bump version to v4.0.0-rc.3 . (#814) @dermotduffy
• Bump version to 4.0.0-rc.2 (#749) @dermotduffy
• Configure VS Code debug and tasks (#690) @felipecrs
• Add type hints to rollup.config.js (#653) @felipecrs
• Upgrade dependencies with major version differences. (#639) @dermotduffy
• For now remove dependabot for node packages (#638) @dermotduffy
• Update deps en masse (#637) @dermotduffy
• Bump version to v4.0.0-rc.1 in preparation (#632) @dermotduffy
• Don't restrict release drafter to main branch (#488) @dermotduffy
• Bump prettier from 2.5.1 to 2.6.0 (#481) @dependabot
• Bump @babel/core from 7.17.5 to 7.17.7 (#479) @dependabot
• Bump @typescript-eslint/eslint-plugin from 5.14.0 to 5.15.0 (#477) @dependabot
• Bump lit from 2.2.0 to 2.2.1 (#478) @dependabot
• Bump dayjs from 1.10.8 to 1.11.0 (#480) @dependabot
• Bump npm-check-updates from 12.5.2 to 12.5.3 (#469) @dependabot
• Bump eslint from 8.10.0 to 8.11.0 (#468) @dependabot
• Bump @cycjimmy/jsmpeg-player from 5.0.1 to 5.1.1 (#476) @dependabot
• Bump home-assistant-js-websocket from 6.0.1 to 6.1.1 (#466) @dependabot
• Bump rollup from 2.70.0 to 2.70.1 (#467) @dependabot
• Bump @typescript-eslint/parser from 5.14.0 to 5.15.0 (#474) @dependabot