function artplayerPluginXVod(option) {
	var controlShow = true;
	var downloadByteSize = 0;
	var isloading = false;
	var loaded = false;
	var available = true;
	return (art) => {
		art.layers.add({
			name: "back_btn",
			html: `<i class="art-icon"><img style="width:30px;" src="./icon/back.png"/></i>`,
			click: function() {
				if (art.fullscreenWeb) {
					toggleScreen();
				} else {
					option.backClick();
				}
			},
			style: {
				display: "block",
				position: "absolute",
				top: "10px",
				left: "10px",
			},
		});
		art.layers.add({
			name: "back_title",
			html: `<span style="width:280px;display: block;line-height:30px;font-size:16px;font-weight:800;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;">${option.title}</span>`,
			click: function() {
				if (art.fullscreenWeb) {
					toggleScreen();
				} else {
					option.backClick();
				}
			},
			index: 0,
			style: {
				display: "block",
				position: "absolute",
				top: "10px",
				left: "45px",
			},
		});
		art.layers.add({
			name: "fastForward_back",
			display: "block",
			html: `<i class="art-icon"><img style="width: 30px" src="${option.backwardUrl}"></i>`,
			click: function() {
				art.backward = 10;
			},
			style: {
				position: "absolute",
				top: "50%",
				left: "30%",
				transform: "translate(-50%, -50%)",
			},
		});
		art.layers.add({
			name: "fastForward_for",
			display: "block",
			html: `<i class="art-icon"><img style="width: 30px" src="${option.forwardUrl}"></i>`,
			click: function() {
				art.forward = 10;
			},
			style: {
				position: "absolute",
				top: "50%",
				left: "70%",
				transform: "translate(-50%, -50%)",
			},
		});
		//播放状态按钮
		art.layers.add({
			name: "state_image",
			display: "block",
			html: `<i class="art-icon"><img style="width: 50px" src="${option.state_play}"></i>`,
			click: function() {
				art.toggle();
			},
			style: {
				position: "absolute",
				top: "50%",
				left: "50%",
				transform: "translate(-50%, -50%)",
			},
		});
		//隔空投送
		// art.layers.add({
		//   name: "airplay_btn",
		//   html:`<i class="art-icon"><img style="width: 30px" src="${option.airplay}"></i>`,
		//   click: function () {
		//     if (art.fullscreenWeb) {
		//       toggleScreen();
		//     }
		//       if (option.isios) {
		//         if (available) {
		//           art.airplay();
		//         } else {
		//           alert("AirPlay不可用, 请检查设备蓝牙/网络连接, 或重启当前设备")
		//         }
		//       }
		//     option.airplayClick();
		//   },
		//   style: {
		//     display: "flex",
		//     position: "absolute",
		//     top: "10px",
		//     right: "20px",
		//   },
		// });
		//分享按钮
		art.layers.add({
			name: "share_btn",
			html: `<i class="art-icon"><img style="width: 30px" src="${option.share}"/></i>`,
			click: function() {
				if (art.fullscreenWeb) {
					toggleScreen();
				}
				option.shareClick();
			},
			style: {
				display: "none",
				position: "absolute",
				top: "10px",
				right: "100px",
			},
		});
		//画面比例调节
		updateAspectRatio();

		function updateAspectRatio() {
			art.layers.update({
				name: "aspectRatio_btn",
				html: art.aspectRatio == "default" ?
					`<i class="art-icon"><img style="width: 30px" src="${option.aspectRatio_n}" /></i>` :
					`<i class="art-icon"><img style="width: 30px" src="${option.aspectRatio_s}" /></i>`,
				click: function() {
					if (art.aspectRatio == "default") {
						art.aspectRatio = art.rect.width + ":" + art.rect.height;
					} else {
						art.aspectRatio = "default";
					}
				},
				style: {
					display: art.fullscreenWeb ? "block" : "none",
					position: "absolute",
					top: "10px",
					right: "170px",
				},
			});
		}
		//锁屏按钮
		updateLock();

		function updateLock() {
			art.layers.update({
				name: "lock_btn",
				html: art.isLock ?
					`<div class="art-layer-lock"><i class="art-icon"> \
               <img style="width: 20px" src="${option.lock}"> \
               </i></div>` : `<div class="art-layer-lock"><i class="art-icon"> \
               <img style="width: 20px" src="${option.unlock}"> \
               </i></div>`,
				click: function() {
					//自写lock 抛弃对art lock状态的依赖
					let player = document.getElementsByClassName("art-video-player")[0];
					let utils = Artplayer.utils;
					if (utils.hasClass(player, "art-lock")) {
						utils.removeClass(player, "art-lock");
						art.isLock = 0;
					} else {
						utils.addClass(player, "art-lock");
						art.isLock = 1;
					}
					updateLock();
				},
				style: {
					position: "absolute",
					top: "50%",
					left: art.fullscreenWeb ? "40px" : "10px",
					transform: "translateY(-50%)",
				},
			});
		}
		//下载速度
		function downLoadByteString() {
			let bytes = downloadByteSize;
			if (bytes === 0) return "";
			var k = 1024,
				sizes = ["b", "K", "M", "G", "T", "P", "E", "Z", "Y"],
				i = Math.floor(Math.log(bytes) / Math.log(k));
			return (bytes / Math.pow(k, i)).toPrecision(3) + " " + sizes[i] + "/s";
		}
		//控制器
		updateplayList(option.playList);

		function updateplayList(list) {
			if (list.length <= 1) {
				return;
			}
			let selectors = [];
			list.forEach((item, index) => {
				var selector = {};
				selector.index = index;
				if (index == option.playIndex) {
					selector.default = true;
				}
				selector.html = `<div style="width:75px !important;">
        <span style="display: inline-block; width:100%; overflow: hidden; white-space: nowrap; text-overflow: ellipsis;">${item.name}</span>
        </div>`;
				selector.url = item.url;
				selectors.push(selector);
			});
			art.controls.update({
				name: "aggregate",
				position: "right",
				style: {
					color: "#ffffff",
					marginRight: "30px",
					display: art.fullscreenWeb ? "flex" : "none",
				},
				html: "选集",
				selector: selectors,
				click: function(...arg) {
					let display = "none";
					let dis = art.controls.aggregate.childNodes[1].style.display;
					if (dis == "none") {
						display = "grid";
					}
					art.controls.aggregate.childNodes[1].style.display = display;
				},
				onSelect: function(item, $dom, event) {
					option.switchPlayIndex(item.index, item.url);
					return "选集";
				},
			});
		}
		updateRate();

		function updateRate() {
			art.controls.update({
				name: "playbackRate",
				position: "right",
				style: {
					color: "#ffffff",
					marginRight: "10px",
				},
				html: "倍速",
				selector: [{
						html: "0.5x",
						rate: 0.5,
					},
					{
						html: "0.75X",
						rate: 0.75,
					},
					{
						default: true,
						html: "1X",
						rate: 1,
					},
					{
						html: "1.25X",
						rate: 1.25,
					},
					{
						html: "1.5X",
						rate: 1.5,
					},
					{
						html: "2.0X",
						rate: 2,
					},
				],
				click: function(...arg) {
					let display = "none";
					let dis = art.controls.playbackRate.childNodes[1].style.display;
					if (dis == "" || dis == "none") {
						display = "block";
					}
					art.controls.playbackRate.childNodes[1].style.display = display;
				},
				onSelect: function(item, $dom, event) {
					art.playbackRate = item.rate;
					return item.html;
				},
			});
		}
		// if (option.isios) {
		// 	updatePip();

		// 	function updatePip() {
		// 		art.controls.update({
		// 			name: "pip_btn",
		// 			position: "right",
		// 			html: '<i class="art-icon"><img width="22px" src="./icon/pip.svg" /></i>',
		// 			style: {
		// 				marginRight: "10px",
		// 				display: "flex",
		// 			},
		// 			click: function(...args) {
		// 				if (art.fullscreenWeb) {
		// 					option.fullscreenCallBack(!art.fullscreenWeb);
		// 				}
		// 				art.pip = !art.pip;
		// 			},
		// 		});
		// 	}
		// }

		//最后添加
		setFullscreen();

		function setFullscreen() {
			art.controls.update({
				name: "screen_btn",
				position: "right",
				html: art.fullscreenWeb ?
					'<i class="art-icon"><img width="25px" src="./icon/fullscreen_out.svg" /></i>' :
					'<i class="art-icon"><img width="25px" src="./icon/fullscreen_in.svg" /></i>',
				style: {
					marginRight: "10px",
				},
				click: function(...args) {
					toggleScreen();
				},
			});
		}

		function toggleScreen() {
			if (option.handleScreen) {
				art.fullscreenWeb = !art.fullscreenWeb;
				option.fullscreenCallBack(art.fullscreenWeb);
			} else {
				option.fullscreenCallBack(!art.fullscreenWeb);
			}
		}

		function playing(state) {
			let adsDisplay = undefined;
			if (!state) {
				let ads = document.getElementsByClassName("artplayer-plugin-ads")[0];
				if (ads) {
					adsDisplay = document.getElementsByClassName(
						"artplayer-plugin-ads"
					)[0].style.display;
				}
				if (adsDisplay == "none") {
					//暂停的时候显示广告 播放时也不会隐藏广告
					showPauseAd(true);
				}
			}
			option.playingCallBack(state);
			art.layers.update({
				name: "state_image",
				display: "block",
				html: state ?
					`<i class="art-icon"><img style="width: 50px" src="${option.state_stop}" /></i>` :
					`<i class="art-icon"><img style="width: 50px" src="${option.state_play}" /></i>`,
				click: function() {
					art.toggle();
				},
				style: {
					position: "absolute",
					top: "50%",
					left: "50%",
					transform: "translate(-50%, -50%)",
				},
			});
		}

		function loading(state) {
			isloading = state;
			updateLoading();
			if (controlShow) {
				let display = state ? "none" : "block";
				art.layers.state_image.style.display = display;
			} else {
				art.layers.state_image.style.display = "none";
			}
		}

		function control(state) {
			if (controlShow != state) {
				controlShow = state;
				let display = state ? "block" : "none";
				art.layers.state_image.style.display = isloading ? "none" : display;
				art.layers.fastForward_for.style.display = display;
				art.layers.fastForward_back.style.display = display;
				art.layers.back_title.style.display = display;
				if (art.layers.airplay_btn) {
					art.layers.airplay_btn.style.display = display;
				}
				if (art.fullscreenWeb) {
					art.layers.share_btn.style.display = display;
					art.layers.aspectRatio_btn.style.display = display;
					art.layers.back_btn.style.display = display;
				}

				if (!state) {
					//控制栏隐藏时 主动隐藏列表项
					art.controls.playbackRate.childNodes[1].style.display = display;
					if (art.controls.aggregate) {
						art.controls.aggregate.childNodes[1].style.display = 'none';
					}
				}
			}
		}

		function fullscreenWeb(state) {
			setFullscreen();
			updateLock();
			if (controlShow) {
				let display = state ? "block" : "none";
				art.layers.share_btn.style.display = display;
				art.layers.aspectRatio_btn.style.display = display;
				if (art.layers.airplay_btn) {
					art.layers.airplay_btn.style.right = state ? "30px" : "10px";
				}
				if (art.controls.pip_btn) {
					art.controls.pip_btn.style.marginRight = state ? "30px" : "10px";
				}
				art.controls.playbackRate.style.marginRight = state ? "30px" : "10px";
				art.controls.screen_btn.style.marginRight = state ? "30px" : "10px";
				if (art.controls.aggregate) {
					//有可能没有这个按钮
					art.controls.aggregate.style.display = state ? "flex" : "none";
				}
			}
			if (!state) {
				art.aspectRatio = "default";
			}
		}

		function aspectRatioChange(aspectRatio) {
			updateAspectRatio();
		}

		function updateLoading() {
			art.layers.update({
				name: "loading_image",
				html: `<div> \
          <img style="width: 40px" src="${option.loading}"> \
          <p style="font-size:12px">${downLoadByteString()}</p> \
          </div>`,
				style: {
					position: "absolute",
					display: isloading ? "block" : "none",
					top: "50%",
					left: "50%",
					transform: "translate(-50%, -50%)",
				},
			});
		}
		art.on("video:loadedmetadata", () => {
			//自己监听airplay当前是否可用
			if (window.WebKitPlaybackTargetAvailabilityEvent) {
				art.video.addEventListener('webkitplaybacktargetavailabilitychanged',
					function(event) {
						switch (event.availability) {
							case "available":
								available = true
								break;
							case "not-available":
								available = false
								break;
						}
					});
			}
		});
		art.on("ready", () => {
			art.once('play', () => {
				loaded = true
			});
			art.once('video:playing', () => {
				loaded = true
			});
		});
		art.on("video:play", () => {
			console.log("video:play");
			playing(true);
		});
		art.on("video:pause", () => {
			console.log("video:pause");
			playing(false);
		});
		art.on('pip', (state) => {
			option.playpip(state)
		});
		art.on("loading", (state) => {
			loading(state);
		});
		art.on("control", (state) => {
			control(state);
		});
		art.on("fullscreenWeb", (state) => {
			fullscreenWeb(state);
		});
		art.on("aspectRatio", (aspectRatio) => {
			aspectRatioChange(aspectRatio);
		});
		art.on("video:timeupdate", () => {
			// let video = document.getElementsByClassName("art-video")[0]
			// if (Hls.isSupported() && art.hls.abrController.bwEstimator) {
			//   downloadByteSize = art.hls.abrController.bwEstimator.getEstimate();
			// } else if (video) {
			//   log(video)
			//   downloadByteSize = video.webkitVideoDecodedByteCount - downloadByteSize
			// } else {
			//   downloadByteSize = 0;
			// }
			// log(downloadByteSize)
			// updateLoading();
		});
		return {
			name: "artplayerPluginXVod",
			toggleScreen,
			fullscreenWeb,
		};
	};
}

if (typeof window !== "undefined") {
	window["artplayerPluginXVod"] = artplayerPluginXVod;
}