Picture in picture throwing errors

[abhijith26]

Expected Behavior

Enter picture in picture on press of a button/ when calling requestPictureInPicure()

Actual Behavior

Not entering , console error => Uncaught (in promise) DOMException: Failed to execute 'requestPictureInPicture' on 'HTMLVideoElement': Must be handling a user gesture if there isn't already an element in Picture-in-Picture.

Steps to Reproduce

create an angular app => create vimeo player using sdk => enter pictureInPicture using player.requestPictureInPicture() method after checking player.getPictureInPicture() ( on line player.js:22)

angular version - 10.1.2
vimeo sdk version - 2.15.3

code

player-component.html

<div [attr.data-vimeo-id]="vimeoVideoId" id="playerDiv"></div> <button (click)="triggerPip()">PIP</button> <button (click)="leavePIp()">leave pip</button>

player-component.ts

import { AfterViewInit, Component, OnInit } from '@angular/core';
import player from '@vimeo/player';

@component({
selector: 'app-vimeo-player',
templateUrl: './vimeo-player.component.html',
styleUrls: ['./vimeo-player.component.css']
})
export class VimeoPlayerComponent implements OnInit, AfterViewInit {

constructor() { }

public vimeoVideoId;
public vimeoPlayer;
public isPlaying;

ngOnInit(): void {
this.vimeoVideoId = 258498657;

}

ngAfterViewInit() {
this.vimeoPlayer = new player('playerDiv', {
id: this.vimeoVideoId,
pip: true,
responsive: true
})
this.registerVimeoEventLIsteners();

}

private registerVimeoEventLIsteners() {
this.vimeoPlayer.on('play', () => {
this.isPlaying = true;
console.log('video started');
})
}

public async triggerPip() {
try {
const isPip = await this.vimeoPlayer.getPictureInPicture();
if (!isPip) {
this.vimeoPlayer.requestPictureInPicture().then(() => {
console.log('pip success');
}).catch((err) => {
console.log(err);
})
}
} catch(err) {
console.log(err);
}
}

public async leavePIp() {
try {
const isPip = await this.vimeoPlayer.getPictureInPicture();
if (isPip) {
this.vimeoPlayer.exitPictureInPicture(() => {
console.log('leaving pip');
}).catch((err) => {
console.log('errro');
})
}
} catch (err) {
console.log(err);
}
}
}

[bdougherty]

Have you tried removing the this.vimeoPlayer.getPictureInPicture() call? It might be losing the user gesture because that requires a round-trip postMessage. There shouldn't be any issues with requesting PiP while it's already open.