|
|
@@ -1,4 +1,4 @@
|
|
|
-import { computed, defineComponent, nextTick, onMounted, onUnmounted, reactive, ref } from "vue";
|
|
|
+import { computed, defineComponent, nextTick, onMounted, onUnmounted, reactive, ref, watch } from "vue";
|
|
|
import ABCJS, {
|
|
|
AbcElem,
|
|
|
AbcVisualParams,
|
|
|
@@ -57,12 +57,12 @@ import {
|
|
|
import instrumentsNames from "/src/constant/instrmentsNames.json";
|
|
|
import { ALL_NOTES, ALL_Pitches } from "./noteData";
|
|
|
import { Close } from "@vicons/ionicons5";
|
|
|
-import { UseDraggable } from "@vueuse/components";
|
|
|
import { getQuery } from "/src/utils/queryString";
|
|
|
import Metronome, { metronomeData } from "/src/helpers/metronome";
|
|
|
import cleanDeep from "clean-deep";
|
|
|
import { saveAs } from "file-saver";
|
|
|
import qs from "query-string";
|
|
|
+import { useDocumentVisibility } from "@vueuse/core";
|
|
|
|
|
|
export const initMusic = (total: number): IMeasure[] => {
|
|
|
return new Array(total).fill(0).map((item, index) => {
|
|
|
@@ -1361,6 +1361,14 @@ export default defineComponent({
|
|
|
abcData.abc.measures = initMusic(abc.measure ?? 30);
|
|
|
data.loading = false;
|
|
|
};
|
|
|
+ const visibility = useDocumentVisibility()
|
|
|
+ watch(() => visibility.value, (val: any) => {
|
|
|
+ if (val === 'hidden') {
|
|
|
+ if (data.playState) {
|
|
|
+ togglePlay('pause')
|
|
|
+ }
|
|
|
+ }
|
|
|
+ })
|
|
|
onMounted(async () => {
|
|
|
const query = getQuery();
|
|
|
if (query.id) {
|
