diff --git a/packages/client/src/components/MkModPlayer.vue b/packages/client/src/components/MkModPlayer.vue index b47f469e88..c570d8b93a 100644 --- a/packages/client/src/components/MkModPlayer.vue +++ b/packages/client/src/components/MkModPlayer.vue @@ -78,7 +78,24 @@ - +
+ + +
@@ -87,6 +104,7 @@ import { ref, shallowRef, nextTick, onDeactivated, onMounted } from "vue"; import * as calckey from "calckey-js"; import FormRange from "./form/range.vue"; import { i18n } from "@/i18n"; +import * as os from "@/os"; import { defaultStore } from "@/store"; import { ChiptuneJsPlayer, ChiptuneJsConfig } from "@/scripts/chiptune2"; @@ -162,6 +180,13 @@ let rowHeight = 0; let buffer = null; let isSeeking = false; +function captionPopup() { + os.alert({ + type: "info", + text: props.module.comment, + }); +} + function showPattern() { patternShow.value = !patternShow.value; nextTick(() => { @@ -367,6 +392,25 @@ onDeactivated(() => { right: 12px; } + > .buttons { + display: flex; + gap: 4px; + position: absolute; + border-radius: 6px; + overflow: hidden; + top: 12px; + right: 12px; + > * { + background-color: var(--accentedBg); + -webkit-backdrop-filter: var(--blur, blur(15px)); + backdrop-filter: var(--blur, blur(15px)); + color: var(--accent); + font-size: 0.8em; + padding: 6px 8px; + text-align: center; + } + } + > .pattern-display { width: 100%; height: 100%;