music-score/src/page-instrument/view-figner/index.tsx

import {
	PropType,
	computed,
	defineComponent,
	nextTick,
	onBeforeMount,
	onMounted,
	onUnmounted,
	reactive,
	ref,
} from "vue";
import styles from "./index.module.less";
import icons from "./image/icons.json";
import { FIGNER_INSTRUMENT_DATA, IFIGNER_INSTRUMENT_Note } from "/src/view/figner-preview";
import {
	ITypeFingering,
	IVocals,
	getFingeringConfig,
	mappingVoicePart,
	subjectFingering,
} from "/src/view/fingering/fingering-config";
import { Howl } from "howler";
import { storeData } from "/src/store";
import {
	api_back,
	api_cloudLoading,
	api_setRequestedOrientation,
	api_setStatusBarVisibility,
	isSpecialShapedScreen,
} from "/src/helpers/communication";
import Hammer from "hammerjs";
import { Button, Icon, Loading, Popup, Progress, Space } from "vant";
import GuideIndex from "./guide/guide-index";
import { getQuery } from "/src/utils/queryString";
import { browser } from "/src/utils";
import { usePageVisibility } from "@vant/use";
import { watch } from "vue";
import icon_loading_img from "./image/icon_loading_img.png";
import state, { IPlatform } from "/src/state";

export default defineComponent({
	name: "viewFigner",
	emits: ["close"],
	props: {
		show: {
			type: Boolean,
			default: true,
		},
		isComponent: {
			type: Boolean,
			default: false,
		},
		subject: {
			type: String as PropType<IVocals>,
			default: "",
		},
	},
	setup(props, { emit }) {
		const query = getQuery();
		const browsInfo = browser();
		const code = mappingVoicePart(query.code, "INSTRUMENT");
		const subject = props.isComponent ? props.subject || "pan-flute" : code || "pan-flute";
		const data = reactive({
			loading: true,
			subject: subject as any,
			realKey: 0,
			notes: [] as IFIGNER_INSTRUMENT_Note[],
			tones: [] as IFIGNER_INSTRUMENT_Note[],
			activeTone: {} as IFIGNER_INSTRUMENT_Note,
			popupActiveTone: {} as IFIGNER_INSTRUMENT_Note,
			activeToneName: "",
			soundFonts: {} as any,
			viewIndex: 0,
			viewTotal: 1,
			noteAudio: null as unknown as Howl,
			transform: {
				scale: 1,
				x: 0,
				y: 0,
				startScale: 1,
				startX: 0,
				startY: 0,
				transition: "",
			},
			tipShow: false,
			tips: [] as IFIGNER_INSTRUMENT_Note[],

			tnoteShow: false,
			loadingSoundFonts: true,
			loadingSoundProgress: 0,

			huaweiPad: navigator?.userAgent?.includes("UAWEIVRD-W09") ? true : false,
			paddingTop: "",
			paddingLeft: "",
		});
		const fingerData = reactive({
			relationshipIndex: 0,
			subject: null as unknown as ITypeFingering,
			fingeringInfo: subjectFingering(data.subject),
		});
		if (!props.isComponent) {
			state.fingeringInfo = fingerData.fingeringInfo;
		}

		const getAPPData = async (type: "top" | "left") => {
			const screenData = await isSpecialShapedScreen();
			if (screenData?.content) {
				// console.log("🚀 ~ screenData:", screenData.content);
				const { isSpecialShapedScreen, notchHeight } = screenData.content;
				if (isSpecialShapedScreen) {
					if (type === "top") {
						data.paddingTop = 25 + "px";
					}
					if (type === "left") {
						data.paddingLeft = 25 + "px";
					}
				}
			}
		};

		const getHeadTop = () => {
			if (!browsInfo.ios && fingerData.fingeringInfo.orientation === 1) {
				getAPPData("top");
			}
			if (!browsInfo.ios && fingerData.fingeringInfo.orientation === 0) {
				getAPPData("left");
			}
		}

		const getNotes = () => {
			const fignerData = FIGNER_INSTRUMENT_DATA[data.subject as keyof typeof FIGNER_INSTRUMENT_DATA];
			if (fignerData) {
				data.tones = fignerData.tones || [];
				if (data.tones.length) {
					data.activeTone = data.tones[0];
					data.popupActiveTone = data.tones[0];
				}
				data.tips = fignerData.tips || [];
				setNotes();
				setTimeout(() => {
					data.loading = false;
				}, 600);
			}
		};
		const setNotes = () => {
			const fignerData = FIGNER_INSTRUMENT_DATA[data.subject as keyof typeof FIGNER_INSTRUMENT_DATA];
			if (fignerData) {
				data.notes = fignerData[`list${data.activeTone.realName || ""}`];
			}
		};
		const getFingeringData = async () => {
			const subject: any = data.subject + (data.viewIndex === 0 ? "" : data.viewIndex);
			console.log("🚀 ~ subject:", subject);
			fingerData.subject = await getFingeringConfig(subject);
		};
		const createAudio = (url: string) => {
			return new Promise((resolve) => {
				const noteAudio = new Howl({
					src: url,
					loop: true,
					onload: () => {
						resolve(noteAudio);
					},
				});
			});
		};
		const getSounFonts = async () => {
			const pathname = /(192|localhost)/.test(location.origin) ? "/" : location.pathname;
			data.loadingSoundFonts = true;
			data.loadingSoundProgress = 0;
			for (let i = 0; i < data.notes.length; i++) {
				const note = data.notes[i];
				// console.log("🚀 ~ note:", i);
				let url = `${pathname}soundfonts/${data.subject}/`;
				url += note.realName;
				url += ".mp3";
				data.soundFonts[note.realKey] = await createAudio(url);
				data.loadingSoundProgress = Math.floor(((i + 1) / data.notes.length) * 100);
			}
			data.loadingSoundProgress = 100;
			api_cloudLoading();
			data.loadingSoundFonts = false;
			// console.log("🚀 ~ data.soundFonts:", data.soundFonts);
		};
		onBeforeMount(() => {
			getNotes();
			if (["pan-flute", "ocarina"].includes(data.subject)) {
				data.viewIndex = 1;
			}
			const o: any = {
				"pan-flute": 2,
				ocarina: 2,
				piccolo: 2,
				"hulusi-flute": 2,
			};
			data.viewTotal = o[data.subject] || 1;
			getFingeringData();
			getSounFonts();
			getHeadTop();
		});

		const noteClick = (item: IFIGNER_INSTRUMENT_Note) => {
			if (data.noteAudio) {
				data.noteAudio.stop();
				if (data.realKey === item.realKey) {
					data.realKey = 0;
					data.noteAudio = null as unknown as Howl;
					return;
				}
			}
			data.realKey = item.realKey;
			data.noteAudio = data.soundFonts[item.realKey];
			data.noteAudio.play();
		};
		const handleStop = () => {
			if (data.noteAudio) {
				data.noteAudio.stop();
				data.realKey = 0;
				data.noteAudio = null as unknown as Howl;
			}
		};

		/** 返回 */
		const handleBack = () => {
			handleStop();
			if (props.isComponent) {
				console.log("关闭");
				emit("close");
				return;
			} else {
				// if (fingerData.fingeringInfo.orientation === 0) {
				// 	api_setRequestedOrientation(1);
				// }
			}
			// 不在APP中,
			if (!storeData.isApp) {
				window.close();
				return;
			}
			api_back();
		};

		onMounted(() => {
			loadElement();
			api_setStatusBarVisibility();
		});
		const loadElement = () => {
			const fingeringContainer = document.getElementById("fingeringContainer");
			// console.log("🚀 ~ fingeringContainer:", fingeringContainer);
			const mc = new Hammer.Manager(fingeringContainer as HTMLElement);
			mc.add(new Hammer.Pan({ threshold: 0, pointers: 0 }));
			mc.add(new Hammer.Pinch({ threshold: 0 })).recognizeWith([mc.get("pan")]);
			// mc.get("pan").set({ direction: Hammer.DIRECTION_ALL });
			// mc.get("pinch").set({ enable: true });
			mc.on("panstart pinchstart", function (ev) {
				data.transform.transition = "";
			});
			mc.on("panmove pinchmove", function (ev) {
				if (ev.type === "pinchmove") {
					// console.log("🚀 ~ ev:", ev.type, ev.scale, ev.deltaX, ev.deltaY);
					data.transform.scale = ev.scale * data.transform.startScale;
					data.transform.x = data.transform.startX + ev.deltaX;
					data.transform.y = data.transform.startY + ev.deltaY;
				}
				if (ev.type === "panmove") {
					// console.log("🚀 ~ ev:", ev.type, ev.deltaX, ev.deltaY);
					data.transform.x = data.transform.startX + ev.deltaX;
					data.transform.y = data.transform.startY + ev.deltaY;
				}
			});
			//
			mc.on("hammer.input", function (ev) {
				// console.log("🚀 ~ ev:", ev.type, ev.isFinal);
				if (ev.isFinal) {
					data.transform.startScale = data.transform.scale;
					data.transform.startX = data.transform.x;
					data.transform.startY = data.transform.y;
				}
			});
		};
		const resetElement = () => {
			data.transform.transition = "all 0.3s";
			nextTick(() => {
				data.transform.scale = 1;
				data.transform.x = 0;
				data.transform.y = 0;
				data.transform.startScale = 1;
				data.transform.startX = 0;
				data.transform.startY = 0;
			});
		};

		const pageVisible = usePageVisibility();
		watch(
			() => pageVisible.value,
			(val) => {
				if (val === "hidden") {
					console.log("页面隐藏停止播放");
					handleStop();
				}
			}
		);
		/** 课件播放 */
		const changePlay = (res: any) => {
			if (res?.data?.api === "setPlayState") {
				handleStop();
			}
		};

		const noteBoxRef = ref();
		const scrollNoteBox = (type: "left" | "right") => {
			const width = noteBoxRef.value.offsetWidth / 2;
			(noteBoxRef.value as unknown as HTMLElement).scrollBy({
				left: type === "left" ? -width : width,
				behavior: "smooth",
			});
		};

		/** 滚轮缩放 */
		const handleWheel = (e: WheelEvent) => {
			e.preventDefault();
			if (e.deltaY > 0) {
				data.transform.scale -= 0.1;
				if (data.transform.scale <= 0.5) {
					data.transform.scale = 0.5;
				}
			} else {
				data.transform.scale += 0.1;
				if (data.transform.scale >= 2) {
					data.transform.scale = 2;
				}
			}
		};

		onMounted(() => {
			window.addEventListener("message", changePlay);
			const fingeringContainer = document.getElementById("fingeringContainer");
			fingeringContainer?.addEventListener("wheel", handleWheel);
		});

		onUnmounted(() => {
			window.removeEventListener("message", changePlay);
			const fingeringContainer = document.getElementById("fingeringContainer");
			fingeringContainer?.removeEventListener("wheel", handleWheel);
		});

		const containerBox = computed(() => {
			if (state.platform === IPlatform.PC || query.modelType) {
				return {
					paddingTop: "1rem",
					paddingBottom: "",
				};
			}
			if (data.subject === "hulusi-flute") {
				return {
					paddingTop: "3.1rem",
					paddingBottom: ".8rem",
				};
			} else if (data.subject === "piccolo") {
				return {
					paddingTop: "4rem",
					paddingBottom: ".8rem",
				};
			} else if (data.subject === "pan-flute") {
				return {
					paddingTop: "0",
					paddingBottom: "0",
				};
			} else if (data.subject === "ocarina") {
				return {
					paddingTop: "1.2rem",
					paddingBottom: "0",
				};
			} else if (data.subject === "melodica") {
				return {
					paddingTop: "2.8rem",
					paddingBottom: "1.8rem",
				};
			} else {
				return {
					paddingTop: "",
					paddingBottom: "",
				};
			}
		});
		return () => {
			const relationship = fingerData.subject?.relationship?.[data.realKey] || [];
			const rs: number[] = Array.isArray(relationship[1])
				? relationship[fingerData.relationshipIndex]
				: relationship;
			const canTizhi = Array.isArray(relationship[1]);
			return (
				<div
					class={[
						styles.fingerBox,
						state.platform !== IPlatform.PC &&
						!query.modelType &&
						fingerData.fingeringInfo.orientation === 1
							? styles.fingerBottom
							: styles.fingerRight,
					]}
				>
					<div
						class={styles.head}
						style={{
							paddingTop: data.paddingTop ? data.paddingTop : "",
							paddingLeft: data.paddingLeft ? data.paddingLeft : "",
						}}
					>
						<div class={styles.left}>
							<button class={[styles.backBtn]} onClick={() => handleBack()}>
								<img src={icons.icon_back} />
							</button>
							{data.subject !== "melodica" && (
								<div
									class={styles.baseBtn}
									onClick={() => {
										data.viewIndex++;
										if (data.viewIndex > data.viewTotal) {
											if (["pan-flute", "ocarina"].includes(data.subject)) {
												data.viewIndex = 1;
											} else {
												data.viewIndex = 0;
											}
										}
										getFingeringData();
									}}
								>
									<img src={icons.icon_toggle} />
									<span>切换视图</span>
								</div>
							)}
						</div>
						<div class={styles.rightBtn}>
							<div class={styles.baseBtn} onClick={() => resetElement()}>
								<img src={icons.icon_2_0} />
								<span>还原</span>
							</div>
							<div
								class={styles.baseBtn}
								onClick={() => {
									resetElement();
									data.tipShow = !data.tipShow;
								}}
							>
								<img src={icons.icon_2_1} />
								<span>使用说明</span>
							</div>
						</div>
					</div>
					<div class={styles.fingerContent}>
						<div class={styles.wrapFinger}>
							<div
								id="fingeringContainer"
								class={styles.boxFinger}
								style={{
									paddingTop: containerBox.value.paddingTop,
									paddingBottom: containerBox.value.paddingBottom,
								}}
							>
								<div
									style={{
										transform: `translate3d(${data.transform.x}px,${data.transform.y}px,0px) scale(${data.transform.scale})`,
										transition: data.transform.transition,
									}}
									class={[styles.fingeringContainer]}
								>
									<div class={styles.imgs}>
										<img src={fingerData.subject?.json?.full} />
										{rs.map((key: number | string, index: number) => {
											const nk: string =
												typeof key === "string" ? key.replace("active-", "") : String(key);
											return <img data-index={nk} src={fingerData.subject?.json?.[nk]} />;
										})}
										<div
											style={{ left: data.viewIndex == 2 ? "0" : "64%" }}
											class={[styles.tizhi, canTizhi && styles.canDisplay]}
											onClick={() =>
												(fingerData.relationshipIndex = fingerData.relationshipIndex === 0 ? 1 : 0)
											}
										>
											替指
										</div>
										<div
											id="finger-note-2"
											style={{ left: "50%", transform: "translateX(-50%)" }}
											class={styles.tizhi}
											onClick={() =>
												(fingerData.relationshipIndex = fingerData.relationshipIndex === 0 ? 1 : 0)
											}
										></div>
									</div>
								</div>
							</div>
							<div
								class={styles.notes}
								style={{
									paddingLeft: data.paddingLeft ? data.paddingLeft : "",
								}}
							>
								<Button class={styles.noteBtn} onClick={() => scrollNoteBox("left")}>
									<Icon name="arrow-left" />
								</Button>
								<div
									class={[
										styles.noteContent,
										browsInfo.ios ? "" : styles.noteContentWrap,
										data.huaweiPad && styles.huaweiPad,
									]}
								>
									<div ref={noteBoxRef} class={styles.noteBox}>
										{data.notes.map((note: IFIGNER_INSTRUMENT_Note, index: number) => {
											const steps = new Array(Math.abs(note.step)).fill(1);
											return (
												<div
													id={index == 0 ? "finger-note-0" : ""}
													draggable={false}
													class={styles.note}
													onClick={() => noteClick(note)}
												>
													{data.realKey === note.realKey ? (
														<img draggable={false} src={icons.icon_btn_ylow} />
													) : (
														<img draggable={false} src={icons.icon_btn_blue} />
													)}

													<div
														class={[styles.noteKey, data.realKey === note.realKey && styles.keyActive]}
													>
														{note.step > 0 ? steps.map((n) => <span class={styles.dot}></span>) : null}

														<div class={styles.noteName}>
															<sup>{note.mark && (note.mark === "rise" ? "#" : "b")}</sup>
															{note.key}
														</div>
														{note.step < 0 ? steps.map((n) => <span class={styles.dot}></span>) : null}
													</div>
												</div>
											);
										})}
									</div>
								</div>
								<Button class={styles.noteBtn} onClick={() => scrollNoteBox("right")}>
									<Icon name="arrow" />
								</Button>
							</div>
						</div>
						<div class={[styles.tips, data.tipShow ? "" : styles.tipHidden]}>
							<div class={styles.tipTitle}>
								<div class={styles.tipTitleName}>{fingerData.fingeringInfo.code}使用说明</div>
								<Button class={styles.tipClose} onClick={() => (data.tipShow = false)}>
									<Icon name="cross" size={19} color="#fff" />
								</Button>
							</div>
							<div class={styles.iconBook}></div>
							<div class={styles.tipContentbox}>
								<div class={styles.tipContent}>
									{data.tips.map((tip, tipIndex) => (
										<div class={styles.tipItem}>
											<div class={styles.iconWrap}>
												<div class={styles.tipItemIcon}>{tipIndex + 1}</div>
											</div>
											<div>
												{tip.name}: {tip.realName}
											</div>
										</div>
									))}
								</div>
							</div>
						</div>
						{data.loadingSoundFonts && (
							<div class={styles.loading}>
								<div class={styles.loadingWrap}>
									<img class={styles.loadingIcon} src={icon_loading_img} />
									<Progress percentage={data.loadingSoundProgress} />
									<div class={styles.loadingTip}>加载中，请稍后…</div>
								</div>
							</div>
						)}
					</div>
					{!!data.tones.length && (
						<>
							{fingerData.fingeringInfo.name == "hulusi-flute" ? (
								<div
									id="finger-note-1"
									class={[styles.toggleBtn, styles.toggleBtnhulusi]}
									onClick={() => (data.tnoteShow = true)}
								>
									<div>
										全按作
										<div class={[styles.noteKey]}>
											{data.activeTone.step > 0 ? <span class={styles.dot}></span> : null}

											<div class={styles.noteName}>
												<sup>
													{data.activeTone.mark && (data.activeTone.mark === "rise" ? "#" : "b")}
												</sup>
												{data.activeTone.key}
											</div>
											{data.activeTone.step < 0 ? <span class={styles.dot}></span> : null}
										</div>
									</div>
									<img src={icons.icon_arrow} />
								</div>
							) : (
								<div id="finger-note-1" class={styles.toggleBtn} onClick={() => (data.tnoteShow = true)}>
									<div style={{ marginTop: "-4px" }}>
										<sup>{data.activeTone.mark && (data.activeTone.mark === "rise" ? "#" : "b")}</sup>
										{data.activeTone.name}
									</div>
									调
									<img src={icons.icon_arrow} />
								</div>
							)}
						</>
					)}

					<Popup
						class="tonePopup"
						v-model:show={data.tnoteShow}
						position={
							state.platform !== IPlatform.PC &&
							!query.modelType &&
							fingerData.fingeringInfo.orientation === 1
								? "bottom"
								: "right"
						}
					>
						<div class={styles.tones}>
							<div class={styles.toneTitle}>
								<div class={styles.tipTitleName}>移调</div>
								<Button class={styles.tipClose} onClick={() => (data.tnoteShow = false)}>
									<Icon name="cross" size={19} color="#fff" />
								</Button>
							</div>
							<div class={styles.tipContentbox}>
								<div class={styles.tipContent}>
									<div class={styles.tipWrap}>
										<Space size={0} class={styles.toneContent}>
											{data.tones.map((tone: IFIGNER_INSTRUMENT_Note) => {
												const steps = new Array(Math.abs(tone.step)).fill(1);
												return (
													<Button
														class={[fingerData.fingeringInfo.name == "hulusi-flute" && styles.hulusiBtn]}
														round
														plain
														type={
															data.popupActiveTone.realName === tone.realName ? "primary" : "default"
														}
														onClick={() => {
															data.popupActiveTone = tone;
															setNotes();
														}}
													>
														{fingerData.fingeringInfo.name == "hulusi-flute" ? (
															<div style={{ display: "flex", alignItems: "center" }}>
																全按作
																<div class={[styles.noteKey, styles.hulusiNoteKey]}>
																	{tone.step > 0 ? <span class={styles.dot}></span> : null}
																	<div class={styles.noteName} style={{ fontSize: "0.25rem" }}>
																		<sup>{tone.mark && (tone.mark === "rise" ? "#" : "b")}</sup>
																		{tone.key}
																	</div>
																	{tone.step < 0 ? <span class={styles.dot}></span> : null}
																</div>
															</div>
														) : (
															<div class={styles.noteName}>
																<sup>{tone.mark && (tone.mark === "rise" ? "#" : "b")}</sup>
																{tone.name}
															</div>
														)}
													</Button>
												);
											})}
										</Space>
									</div>
									<div class={styles.toneAction}>
										<img onClick={() => (data.tnoteShow = false)} src={icons.icon_action_cancel} />
										<img
											onClick={() => {
												data.activeTone = data.popupActiveTone;
												setNotes();
												data.tnoteShow = false;
											}}
											src={icons.icon_action_confirm}
										/>
									</div>
								</div>
							</div>
						</div>
					</Popup>

					{props.show && !data.loading && !data.loadingSoundFonts && (
						<GuideIndex showGuide={false} list={["finger"]} />
					)}
				</div>
			);
		};
	},
});