mat-tab-group stops audio/video player on tab leave

[iiiyx]

Reproduction

Use StackBlitz to reproduce your issue: https://stackblitz.com/fork/angular-otmu5c

Steps to reproduce:

1. start the audio player on the Player tab
2. go to the Description tab

Expected Behavior

Audio continues playing

Actual Behavior

Audio stops

Environment

• Angular: 8.2.10
• CDK/Material: 8.2.3
• Browser(s): Chrome 77.0.3865.120
• Operating System (e.g. Windows, macOS, Ubuntu): Windows 10

Description

Certainly, this is a premature optimization made at

components/src/material/tabs/tab-body.ts

Lines 76 to 91 in 14c4dba

	/** Set initial visibility or set up subscription for changing visibility. */
	ngOnInit(): void {
	super.ngOnInit();
	this._centeringSub = this._host._beforeCentering
	.pipe(startWith(this._host._isCenterPosition(this._host._position)))
	.subscribe((isCentering: boolean) => {
	if (isCentering && !this.hasAttached()) {
	this.attach(this._host._content);
	}
	});
	this._leavingSub = this._host._afterLeavingCenter.subscribe(() => {
	this.detach();
	});
	}

Why are you detaching the content of the tab even when a component's user doesn't ask to?

[iiiyx]

There are also other issues concerning this detaching. For example, the view of an inactive tab is inited empty (detached) and the mat-tabs-group user should implement workarounds for this.
A simple example:
there is a video player on the first tab, there is an image editor on the second tab
scenario: the user takes a snapshot from the video and it is loaded to the editor.
issue: image editor can't be inited, because its tab has an empty view. it has no canvas element to be initiated with.
workaround: hold the image editor initialization and store the snapshots until the tab view is attached.
But why do we must make such workarounds? We want just to use Tabs!

[jelbourn]

Going to track this in #19480

[angular-automatic-lock-bot]

This issue has been automatically locked due to inactivity.
Please file a new issue if you are encountering a similar or related problem.

Read more about our automatic conversation locking policy.

_{This action has been performed automatically by a bot.}