更新歌曲播放栏布局

2022-11-03 06:34:57 +08:00
parent 2003c5a0c9
commit 716120ea61
25 changed files with 731 additions and 233 deletions
@@ -0,0 +1,94 @@
+<template>
+  <material-popup-btn :class="$style.btnContent">
+    <button :class="$style.btn" :aria-label="isMute ? $t('player__volume_muted') : `${$t('player__volume')}${parseInt(volume * 100)}%`">
+      <svg version="1.1" xmlns="http://www.w3.org/2000/svg" xlink="http://www.w3.org/1999/xlink" width="100%" viewBox="0 0 24 24" space="preserve">
+        <use :xlink:href="icon" />
+      </svg>
+    </button>
+    <template #content>
+      <div :class="$style.setting">
+        <span>{{ Math.trunc(volume * 100) }}%</span>
+        <common-volume-bar />
+        <base-checkbox
+          id="player__volume_mute"
+          :model-value="isMute"
+          :label="$t('player__volume_mute_label')"
+          @update:model-value="saveVolumeIsMute($event)"
+        />
+      </div>
+    </template>
+  </material-popup-btn>
+</template>
+
+<script setup>
+import { computed } from '@common/utils/vueTools'
+// import useNextTogglePlay from '@renderer/utils/compositions/useNextTogglePlay'
+// import useToggleDesktopLyric from '@renderer/utils/compositions/useToggleDesktopLyric'
+// import { musicInfo, playMusicInfo } from '@renderer/store/player/state'
+import { saveVolumeIsMute } from '@renderer/store/setting'
+import { volume, isMute } from '@renderer/store/player/volume'
+
+const icon = computed(() => {
+  return isMute.value
+    ? '#icon-volume-mute-outline'
+    : volume.value == 0
+      ? '#icon-volume-off-outline'
+      : volume.value < 0.3
+        ? '#icon-volume-low-outline'
+        : volume.value < 0.7
+          ? '#icon-volume-medium-outline'
+          : '#icon-volume-high-outline'
+})
+
+</script>
+
+<style lang="less" module>
+@import '@renderer/assets/styles/layout.less';
+.btnContent {
+  flex: none;
+  height: 100%;
+}
+
+.btn {
+  position: relative;
+  // color: var(--color-button-font);
+  justify-content: center;
+  align-items: center;
+  transition: color @transition-normal;
+  cursor: pointer;
+  background-color: transparent;
+  border: none;
+  width: 24px;
+  display: flex;
+  flex-flow: column nowrap;
+  padding: 0;
+
+  svg {
+    transition: opacity @transition-fast;
+    opacity: .6;
+    filter: drop-shadow(0 0 1px rgba(0, 0, 0, 0.2));
+  }
+  &:hover {
+    svg {
+      opacity: .9;
+    }
+  }
+  &:active {
+    svg {
+      opacity: 1;
+    }
+  }
+}
+
+.setting {
+  display: flex;
+  flex-flow: column nowrap;
+  font-size: 14px;
+  gap: 8px;
+  label span {
+    line-height: 1;
+  }
+}
+
+
+</style>