垃圾vite 换成webpack

2023-01-15 17:01:15 +08:00
parent 6ed8c355d8
commit 62c995a321
36 changed files with 7650 additions and 1037 deletions
@@ -0,0 +1,164 @@
+<template>
+  <div class="aplayer-lrc">
+    <div
+      class="aplayer-lrc-contents"
+      :style="transformStyle"
+    >
+      <p
+        v-for="(line, index) of lrcLines"
+        :key="index"
+        :class="{ 'aplayer-lrc-current': index === currentLineIndex }"
+      >
+        {{ line[1] }}
+      </p>
+    </div>
+  </div>
+</template>
+
+<script>
+  import {parseLrc} from '../utils'
+
+  export default {
+    props: {
+      currentMusic: {
+        type: Object,
+        required: true
+      },
+      playStat: {
+        type: Object,
+        required: true
+      }
+    },
+    data () {
+      return {
+        displayLrc: '',
+        currentLineIndex: 0,
+      }
+    },
+    computed: {
+      lrcLines () {
+        return parseLrc(this.displayLrc)
+      },
+      currentLine () {
+        if (this.currentLineIndex > this.lrcLines.length - 1) {
+          return null
+        }
+        return this.lrcLines[this.currentLineIndex]
+      },
+      transformStyle () {
+        // transform: translateY(0); -webkit-transform: translateY(0);
+        return {
+          transform: `translateY(${-this.currentLineIndex * 16}px)`,
+          webkitTransform: `translateY(${-this.currentLineIndex * 16}px)`,
+        }
+      },
+    },
+    methods: {
+      applyLrc (lrc) {
+        if (/^https?:\/\//.test(lrc)) {
+          this.fetchLrc(lrc)
+        } else {
+          this.displayLrc = lrc
+        }
+      },
+      fetchLrc (src) {
+        fetch(src)
+          .then(response => response.text())
+          .then((lrc) => {
+            this.displayLrc = lrc
+          })
+      },
+      hideLrc () {
+        this.displayLrc = ''
+      },
+    },
+    watch: {
+      currentMusic: {
+        immediate: true,
+        handler (music) {
+          this.currentLineIndex = 0
+          if (music.lrc) {
+            this.applyLrc(music.lrc)
+          } else {
+            this.hideLrc()
+          }
+        }
+      },
+      'playStat.playedTime' (playedTime) {
+        for (let i = 0; i < this.lrcLines.length; i++) {
+          const line = this.lrcLines[i]
+          const nextLine = this.lrcLines[i + 1]
+          if (playedTime >= line[0] && (!nextLine || playedTime < nextLine[0])) {
+            this.currentLineIndex = i
+          }
+        }
+      },
+    }
+  }
+</script>
+<style lang="less">
+  @import "../less/variables";
+
+  .aplayer-lrc {
+    position: relative;
+    height: @lrc-height;
+    text-align: center;
+    overflow: hidden;
+    margin-bottom: 7px;
+
+    &:before {
+      position: absolute;
+      top: 0;
+      z-index: 1;
+      display: block;
+      overflow: hidden;
+      width: 100%;
+      height: 10%;
+      content: ' ';
+      background: -moz-linear-gradient(top, rgba(255, 255, 255, 1) 0%, rgba(255, 255, 255, 0) 100%);
+      background: -webkit-linear-gradient(top, rgba(255, 255, 255, 1) 0%, rgba(255, 255, 255, 0) 100%);
+      background: linear-gradient(to bottom, rgba(255, 255, 255, 1) 0%, rgba(255, 255, 255, 0) 100%);
+      filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffffff', endColorstr='#00ffffff', GradientType=0);
+    }
+
+    &:after {
+      position: absolute;
+      bottom: 0;
+      z-index: 1;
+      display: block;
+      overflow: hidden;
+      width: 100%;
+      height: 33%;
+      content: ' ';
+      background: -moz-linear-gradient(top, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0.8) 100%);
+      background: -webkit-linear-gradient(top, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0.8) 100%);
+      background: linear-gradient(to bottom, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0.8) 100%);
+      filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#00ffffff', endColorstr='#ccffffff', GradientType=0);
+    }
+
+    p {
+      font-size: 12px;
+      color: #666;
+      line-height: 16px;
+      height: 16px;
+      padding: 0;
+      margin: 0;
+      transition: all 0.5s ease-out;
+      opacity: 0.4;
+      overflow: hidden;
+
+      &.aplayer-lrc-current {
+        opacity: 1;
+        overflow: visible;
+        height: initial;
+      }
+    }
+
+    .aplayer-lrc-contents {
+      width: 100%;
+      transition: all 0.5s ease-out;
+      user-select: text;
+      cursor: default;
+    }
+  }
+</style>