fix(BrowserStorage): don't generate empty entries in BrowserStorage

[Antreesy]

☑️ Resolves

• Fix empty entries like 'virtualBackgroundType_' in local storage without defined key
  • this.get('token') sometime returns nothing, as webrtc isn't always initialising it
  • Prevent generating empty entries again by providing a token
  • Add init function to cleanup them while initialising
• reset virtualBackground at media preview, if none is set for conversation

🖌️ UI Checklist

🖼️ Screenshots / Screencasts

🏡 After

reset-virtual-bg.webm

🚧 Tasks

• Code review

🏁 Checklist

• 🌏 Tested with Chrome, Firefox and Safari or should not be risky to browser differences
• 🖥️ Tested with Desktop client or should not be risky for it
• ⛑️ Tests are included or not possible

[ShGKme]

• this.get('token') sometime returns nothing, as webrtc isn't always initialising it

Is it a bug or expected behavior?

[Antreesy]

Found only one setup here:

spreed/src/utils/webrtc/models/LocalMediaModel.js

Lines 198 to 204 in cc426e5

	_setInitialState(localStream) {
	this.set('token', store.getters.getToken())
	this._updateMediaAvailability(localStream)
	this.set('raisedHand', { state: false, timestamp: Date.now() })
	},

should be set change on each setWebRtc (each call), while LocalmediaModel is persistent

[ShGKme]

With this PR those methods use 2 tokens - from an argument and from context. It is not clear for me, what is the difference between them, when one should be used and when the other.

If the token from the context is wrong, but it is not supposed to be wrong, we probably should find why it is wrong and fix it.

If it cannot be correct in this case, or we probably should get rid of it at lease in these operations.

But I'd avoid intermediate solution for further support.

[Antreesy]

we probably should find why it is wrong and fix it.

Got the context so far: see signaling method join call in 'webrtc/index.js' call stack and code:

• L157: start of the method
  -L167-188: calling public methods of localMediaModel (token is not defined ATM : ⚠️ )
• L201: webrtc.startMedia returns Promise, upon fullfillment of which _setInitialState is triggered: here is where we set 'token'.

All places that use this.get('token') in LocalMediaModel are responsible only for interacting with BrowserStorage, so should be safe to add solution:

• L166: set token when it's available

[danxuliu]

Nice catch with the undefined token! :-)

Unfortunately I had no time to find the steps to reproduce that issue (although I saw it in the past), but code looks good 👍 A little comment either in the code or in the commit would be nice for future reference.

Independently of that I left some minor comments.

[ShGKme]

Cleaner now, thanks for the investigation! 💙

Agree with Daniel's nitpicks.