v2.0.0

2022-10-29 11:36:35 +08:00
parent 66b965d9f7
commit e45cee6596
715 changed files with 57096 additions and 31771 deletions
@@ -0,0 +1,143 @@
+<template>
+  <div :class="$style.footer">
+    <div :class="$style.footerLeft">
+      <control-btns />
+      <div :class="$style.progressContainer">
+        <div :class="$style.progressContent">
+          <common-progress-bar
+            :class-name="$style.progress"
+            :progress="progress"
+            :handle-transition-end="handleTransitionEnd"
+            :is-active-transition="isActiveTransition"
+          />
+        </div>
+      </div>
+      <div :class="$style.timeLabel"><span :class="$style.status" style="margin-left: 15px">{{ status }}</span><span>{{ nowPlayTimeStr }}</span><span style="margin: 0 5px;">/</span><span>{{ maxPlayTimeStr }}</span></div>
+    </div>
+    <div :class="$style.playControl">
+      <div :class="$style.playBtn" style="transform: rotate(180deg);" :aria-label="$t('player__prev')" @click="playPrev()">
+        <svg version="1.1" xmlns="http://www.w3.org/2000/svg" xlink="http://www.w3.org/1999/xlink" height="100%" viewBox="0 0 220.847 220.847" space="preserve">
+          <use xlink:href="#icon-nextMusic" />
+        </svg>
+      </div>
+      <div :class="$style.playBtn" :aria-label="isPlay ? $t('player__pause') : $t('player__play')" @click="togglePlay">
+        <svg v-if="isPlay" version="1.1" xmlns="http://www.w3.org/2000/svg" xlink="http://www.w3.org/1999/xlink" height="100%" viewBox="0 0 277.338 277.338" space="preserve">
+          <use xlink:href="#icon-pause" />
+        </svg>
+        <svg v-else version="1.1" xmlns="http://www.w3.org/2000/svg" xlink="http://www.w3.org/1999/xlink" height="100%" viewBox="0 0 170 170" space="preserve">
+          <use xlink:href="#icon-play" />
+        </svg>
+      </div>
+      <div :class="$style.playBtn" :aria-label="$t('player__next')" @click="playNext()">
+        <svg version="1.1" xmlns="http://www.w3.org/2000/svg" xlink="http://www.w3.org/1999/xlink" height="100%" viewBox="0 0 220.847 220.847" space="preserve">
+          <use xlink:href="#icon-nextMusic" />
+        </svg>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script setup>
+import { playNext, playPrev, togglePlay } from '@renderer/core/player'
+import { status, isPlay } from '@renderer/store/player/state'
+import usePlayProgress from '@renderer/utils/compositions/usePlayProgress'
+
+import ControlBtns from './components/ControlBtns'
+
+const {
+  nowPlayTimeStr,
+  maxPlayTimeStr,
+  progress,
+  isActiveTransition,
+  handleTransitionEnd,
+} = usePlayProgress()
+
+</script>
+
+<style lang="less" module>
+@import '@renderer/assets/styles/layout.less';
+
+.footer {
+  flex: 0 0 100px;
+  overflow: hidden;
+  display: flex;
+  align-items: center;
+}
+.footerLeft {
+  flex: auto;
+  display: flex;
+  flex-flow: column nowrap;
+  padding: 13px;
+  overflow: hidden;
+}
+
+.progress-container {
+  width: 100%;
+  position: relative;
+  padding: 3px 0;
+}
+
+.progress-content {
+  position: relative;
+  height: 16px;
+  padding: 5px 0;
+  width: 100%;
+}
+.progress {
+  height: 100%;
+}
+
+.bar-transition {
+  transition-property: transform;
+  transition-timing-function: ease-out;
+  transition-duration: 0.2s;
+}
+.time-label {
+  width: 100%;
+  height: 18px;
+  display: flex;
+  span {
+    font-size: 13px;
+  }
+}
+.status {
+  flex: auto;
+}
+
+.play-control {
+  flex: none;
+  height: 100%;
+  display: flex;
+  justify-content: flex-end;
+  align-items: center;
+  padding: 0 25px;
+  color: var(--color-button-font);
+}
+.play-btn {
+  height: 40%;
+  padding: 5px;
+  cursor: pointer;
+  flex: none;
+  // transition: @transition-normal;
+  // transition-property: color;
+  color: var(--color-button-font);
+  transition: opacity 0.2s ease;
+  opacity: 1;
+  cursor: pointer;
+
+  +.play-btn {
+    margin-left: 10px;
+  }
+  svg {
+    fill: currentColor;
+    filter: drop-shadow(0 0 1px rgba(0, 0, 0, 0.2));
+  }
+  &:hover {
+    opacity: 0.8;
+  }
+  &:active {
+    opacity: 0.6;
+  }
+}
+
+</style>