Update track switch off UI

[olipyskoty]

Contributing to Twilio

All third party contributors acknowledge that any contributions they provide will be made under the same open source license that the open source project is provided under.

• I acknowledge that all my contributions will be made under the project's license.

Pull Request Details

JIRA link(s):

• VIDEO-9513

Description

This PR is a copy of PR #708. This branch has been created off of main in order to avoid a large and confusing merge conflict (merging main into old VIDEO-9513-update-disabled-video-ui branch).

Burndown

Before review

• Updated CHANGELOG.md if necessary
• Added unit tests if necessary
• Updated affected documentation
• Verified locally with npm test
• Manually sanity tested running locally
• Included screenshot as PR comment (if needed)
• Ready for review

Before merge

• Got one or more +1s
• Re-tested if necessary

[timmydoza]

Suggested change

	{isVideoSwitchedOff && (
	<div className={clsx(classes.trackSwitchOffContainer, { [classes.isSwitchedOff]: isVideoSwitchedOff })}>
	<Typography variant="body1" className={classes.switchedOffMessage}>
	Video has been switched off to conserve bandwidth.
	</Typography>
	</div>
	)}
	<div className={clsx(classes.trackSwitchOffContainer, { [classes.isSwitchedOff]: isVideoSwitchedOff })}>
	<Typography variant="body1" className={classes.switchedOffMessage}>
	Video has been switched off to conserve bandwidth.
	</Typography>
	</div>

We don't need the isVideoSwitchedOff && since the visibility is determined by the isSwitchedOff class. Plus, when we remove this element from the page when video is switched on, it prevents us from seeing the fade-out of the text.

[olipyskoty]

Closing - opened new PR for new designs in #745