//use this only after the player is ready, either on callback function or like this.

player.ready(function () {
	// console.error("+++ player.ready");
	this.el_.querySelector(".vjs-text-track-display").style.pointerEvents = "auto";

	// ".vjs-text-track-display" is the element excluding the controls, so you want to set an event listener on that rather than the whole player.

	document.querySelector(".vjs-text-track-display").addEventListener("dblclick", function (e) {
		// console.error("+++ dblclick +++ e:", e);

		//the class ""vjs-touch-enabled"" is only present when the device is touch-enabled.

		// +++ if (player.el_.classList.contains("vjs-touch-enabled")) {
			//I have divided screen into three equal parts. if I double click on middle it will play/pause the video, otherwise, it will forward or rewind.

			const playerWidth = document.querySelector("#my_video").getBoundingClientRect().width;

			if (0.66 * playerWidth < e.offsetX) {
				// console.error("+++ dblclick +++ player.liveTracker.isLive():", player.liveTracker.isLive());
				// console.error("+++ dblclick +++ player.liveTracker.atLiveEdge():", player.liveTracker.atLiveEdge());
				if (!player.liveTracker.atLiveEdge()) {
					player.currentTime(player.currentTime() + 15);
				}
			} else if (e.offsetX < 0.33 * playerWidth) {
				player.currentTime((player.currentTime() - 15) < 0 ? 0 : (player.currentTime() - 15));
			} else {
				if (player.paused()) {
				  player.play();
				} else {
				  player.pause();
				}
			}
		// +++ }
	});
});