PictureInPictureToggle is greyed out in browsers that do not support the Picture-in-Picture API

[amtins]

Description

The PictureInPictureToggle component should not be displayed when changing the order of components in the ControlBar in browsers that do not support the Picture-in-Picture API.

Prior to v7.19.0, it was possible to change this behavior by doing the following

class PictureInPictureToggle extends (videojs.getComponent('PictureInPictureToggle')) {
    enable() {
        super.enable();
        this.show();
    }

    disable() {
        super.disable();
        this.hide();
    }
}
videojs.registerComponent('PictureInPictureToggle', PictureInPictureToggle);

Although this solution was not ideal if the requestPictureInPicture failed.

Reduced test case

No response

Steps to reproduce

const video = document.createElement('video');
video.id = 'video';
video.classList.add('video-js');
document.body.append(video);
const p1 = videojs(video, {
    muted: true,
    controls: true,
    controlBar: {
        children: [
            'playToggle',
            'volumePanel',
            'pictureInPictureToggle',
            'currentTimeDisplay',
            'timeDivider',
            'durationDisplay',
            'progressControl',
            'liveDisplay',
            'seekToLive',
            'remainingTimeDisplay',
            'customControlSpacer',
            'playbackRateMenuButton',
            'chaptersButton',
            'descriptionsButton',
            'subsCapsButton',
            'audioTrackButton',
            'fullscreenToggle'
        ]
    }
}, () => {
    p1.src('https://d2zihajmogu5jn.cloudfront.net/bipbop-advanced/bipbop_16x9_variant.m3u8')
});

Errors

No response

What version of Video.js are you using?

7.20.2

Video.js plugins used.

No response

What browser(s) including version(s) does this occur with?

Firefox

What OS(es) and version(s) does this occur with?

All

[video-archivist-bot]

Hey! We've detected some video files in a comment on this issue. If you'd like to permanently archive these videos and tie them to this project, a maintainer of the project can reply to this issue with the following commands:

• for https://d2zihajmogu5jn.cloudfront.net/bipbop-advanced/bipbop_16x9_variant.m3u8: say @video-archivist-bot save qABPkj