Animated Background doesn't get "disabled" on view change

[SeLLeRoNe]

Your Animated Background configuration

Dashboard config

---
# This is actually just a bootstrap for my Lovelace configuration.
# It loads all resources for Lovelace dynamically from subfolders
# inside the `lovelace/resources` directory.
#
# Views are actually include one by one, this to guarentee the order of
# the tabs of the view in the UI.
#
title: Test
preload_cards:
  - markdown
preload_rows:
  - divider
custom_header:
  compact_mode: true
  footer_mode: false
  hide_header: false
  header_text: '{{ time }}' # See templates section for more on this.
  hide_config: true
  hide_raw: true
  hide_unused: true
  hide_help: true
  # Add the below to theme the header
  background: var(--app-header-background-color)
  elements_color: var(--app-header-text-color)
  active_tab_color: var(--state-icon-active-color)
  tab_indicator_color: var(--state-icon-active-color)
animated_background: !include lovelace/animated_backgrounds/test.yaml
decluttering_templates: !include_dir_merge_named lovelace/templates/
views:
  - !include lovelace/views/test.yaml
  - !include lovelace/views/test_map.yaml
  - !include lovelace/views/surveillance.yaml

test.yaml

---
debug: true
included_users:
  - Andrea Iannucci
included_devices:
  - windows
groups:
  - name: test
    config:
      entity: "weather.dark_sky"
      state_url:
        'partlycloudy': /local/animated_backgrounds/test.html

Version of Home Assistant "Latest" is not a version number. Please provide the actual version number. 0.109.3 Describe the bug A clear and concise description of what the bug is.

Browser console log Post anything related to animated-background.js First load

Animated Background DEBUG: Configured entity weather.dark_sky is now partlycloudy
animated-background.js:28 Animated Background DEBUG: Starting
animated-background.js:35 Animated Background DEBUG: Debug mode enabled
animated-background.js:37 {auth: u, connection: l, connected: true, states: {…}, config: {…}, …}
animated-background.js:35 Animated Background DEBUG: Panel mode detected
animated-background.js:35 Animated Background DEBUG: Removing view background
animated-background.js:37 {entity: "weather.dark_sky", state_url: {…}}

Update without cache:

animated-background.js:24 Animated Background: Starting
animated-background.js:35 Animated Background DEBUG: Debug mode enabled
animated-background.js:37 {auth: u, connection: l, connected: true, states: {…}, config: {…}, …}
animated-background.js:28 Animated Background DEBUG: Configured entity weather.dark_sky is now partlycloudy

Change view (in the same dashboard), this view have no animated_background configured.

Animated Background DEBUG: View switched, no configuration found

To Reproduce Steps to reproduce the behavior:

1. Go to '...'
2. Click on '....'
3. Scroll down to '....'
4. See error

Expected behavior A clear and concise description of what you expected to happen. The theme default background should be restored upon view change, if the view doesn't have animated_background configuration.

Desktop (please complete the following information):

• OS: Windows 10
• Browser Chrome
• Version 81.0.4044.129

Smartphone (please complete the following information):

• Device: [e.g. iPhone6]
• OS: [e.g. iOS8.1]
• Browser [e.g. stock browser, safari]
• Version [e.g. 22]

Screenshots If applicable, add screenshots to help explain your problem.

First fresh load (no cache):

View change:

View reload:

Back to first view (with animated_background)

Additional context Add any other context about the problem here.

[Villhellm]

Can you post the debug output of going from the view with an animated background to the view that doesn't have it configured?

[SeLLeRoNe]

Ehm, the one I posted is everything that is actually showed in the console

[Villhellm]

I could get the same behavior if I went back and forth quickly between two views, but I'm not sure why it was happening to you immediately.

I updated the removeDefaultBackground function to restore the background if a configuration is not found/disabled.

Is it easier for you if I do prereleases or are you manually overwriting every time anyway?

[SeLLeRoNe]

It's about the same no worries :) Whatever comes easier to you

[Villhellm]

Are you not using HACS? I thought maybe prereleases would be better if you were.

Anyway, let me know if I solved this issue at least. Your other issue is more perplexing.

[SeLLeRoNe]

Yes I am, but I do also know how to overwrite the file with the raw copy from a different branch :P

[SeLLeRoNe]

With latest from master I got quite a few of those:

animated-background.js:208 Uncaught (in promise) TypeError: Cannot read property 'enabled' of null
    at enabled (animated-background.js:208)
    at renderBackgroundHTML (animated-background.js:291)
    at Object.set hass [as hass] (animated-background.js:88)
    at hass-base-mixin.ts:42
    at Array.forEach (<anonymous>)
    at HTMLElement.value (hass-base-mixin.ts:41)
    at HTMLElement.hassChanged (url-sync-mixin.ts:32)
    at HTMLElement.value (home-assistant.ts:63)
    at HTMLElement.performUpdate (updating-element.ts:720)
    at HTMLElement._enqueueUpdate (updating-element.ts:653)
enabled @ animated-background.js:208
renderBackgroundHTML @ animated-background.js:291
set hass @ animated-background.js:88
(anonymous) @ paper-ripple.js:356
value @ paper-ripple.js:356
hassChanged @ paper-ripple.js:356
value @ home-assistant.ts:42
performUpdate @ app.36e37a77.js:2
_enqueueUpdate @ app.36e37a77.js:2
async function (async)
_enqueueUpdate @ app.36e37a77.js:2
_requestUpdate @ app.36e37a77.js:2
set @ app.36e37a77.js:2
value @ paper-ripple.js:356
(anonymous) @ paper-ripple.js:356
n @ core.167f6968.js:1
(anonymous) @ core.167f6968.js:1
(anonymous) @ core.167f6968.js:1
_handleMessage @ core.167f6968.js:1
(anonymous) @ core.167f6968.js:1

[SeLLeRoNe]

Sorry actually HACS thought the latest release was more important than the master branch :)

Now when I switch between views I see this:

nimated Background DEBUG: View switched, no configuration found
animated-background.js:35 Animated Background DEBUG: Panel mode detected
animated-background.js:35 Animated Background DEBUG: Removing view background
animated-background.js:37 

Sorry I have to use a screenshot, for some reason I cannot copy this part:

[SeLLeRoNe]

One more thing I noticed, I went to another dashboard, then back to this one.. and the background was unloaded (wrong, but also, white background) This in the console

Animated Background DEBUG: Configured entity weather.dark_sky is now partlycloudy
animated-background.js:28 Animated Background DEBUG: Starting
animated-background.js:35 Animated Background DEBUG: Debug mode enabled
animated-background.js:37 {auth: u, connection: l, connected: true, states: {…}, config: {…}, …}
animated-background.js:35 Animated Background DEBUG: Panel mode detected
animated-background.js:35 Animated Background DEBUG: Removing view background
animated-background.js:37 

[Villhellm]

I genuinely have no idea why switching dashboards broke -_- Working on it

[Villhellm]

Oh I do know why. Old fixes causing new bugs D: fixing now

[Villhellm]

Okay, that's fixed (or should be)

[SeLLeRoNe]

Ok now I can switch between dashboards and it works. I tried again to switch view isnide the same dashboard and beside the fact taht it does say is switching it off, as you can see from the screenshot, it is not :D

---

[SeLLeRoNe]

Actually, errata corrige.. I had to clean the cache on each of the view, and now when I switch view it actually disable the background.. go figure :D

[SeLLeRoNe]

Thanks for your effort and help.. and patience :D

[Villhellm]

When debugging if you go into the Network tab in the developer tools you can disable cache while you have developer tools open. That'll give us some more consistency

[SeLLeRoNe]

Yep I do have that but somehow didn't help. What did help it's using this method (beside be in italian :D )