chore(audio): use icons-vue component (#1930)

* chore(audio): use icons-vue component

* refactor(audio): add div to wrap Voice Icon

* feat(audio): add height for icons

* style: remove useless code

* chore: undo specified file changes

* chore: reset pnpm-lock.yaml

src/packages/__VUE/audio/__tests__/audio.spec.ts

@@ -1,6 +1,5 @@
 import { config, mount } from '@vue/test-utils';
 import { nextTick, ref, toRefs, reactive, onMounted } from 'vue';
-import NutIcon from '../../icon/index.vue';
 import NutRange from '../../range/index.vue';
 import Audio from '../index.vue';
 import AudioOperate from '../../audiooperate/index.vue';
@@ -14,7 +13,6 @@ function sleep(delay = 0): Promise<void> {
 
 beforeAll(() => {
   config.global.components = {
-    NutIcon,
     NutRange,
     AudioOperate,
     NutButton
@@ -40,7 +38,6 @@ test('audio init render', async () => {
   const wrapper = mount({
     components: {
       'nut-audio': Audio,
-      'nut-icon': NutIcon,
       'nut-range': NutRange,
       'nut-audio-operate': AudioOperate,
       'nut-button': NutButton

src/packages/__VUE/audio/demo.vue

@@ -22,7 +22,7 @@
       ref="audioDemo"
     >
       <div class="nut-voice">
-        <div><nut-icon name="voice"></nut-icon></div>
+        <div><Voice></Voice></div>
         <div>{{ duration }}"</div>
       </div>
     </nut-audio>
@@ -59,11 +59,16 @@
       @changeProgress="changeProgress"
     >
       <div class="nut-audio-operate-group">
-        <nut-audio-operate type="back"><nut-icon name="play-double-back" size="35"></nut-icon></nut-audio-operate>
-        <nut-audio-operate type="play"
-          ><nut-icon :name="!playing ? 'play-start' : 'play-stop'" size="35"></nut-icon
-        ></nut-audio-operate>
-        <nut-audio-operate type="forward"><nut-icon name="play-double-forward" size="35"></nut-icon></nut-audio-operate>
+        <nut-audio-operate type="back">
+          <PlayDoubleBack width="35px" height="35px"></PlayDoubleBack>
+        </nut-audio-operate>
+        <nut-audio-operate type="play">
+          <PlayStart v-if="!playing" width="35px" height="35px"></PlayStart>
+          <PlayStop v-else width="35px" height="35px"></PlayStop>
+        </nut-audio-operate>
+        <nut-audio-operate type="forward">
+          <PlayDoubleForward width="35px" height="35px"></PlayDoubleForward>
+        </nut-audio-operate>
       </div>
     </nut-audio>
   </div>
@@ -74,7 +79,7 @@ import { reactive, toRefs, ref, onMounted } from 'vue';
 import { createComponent } from '@/packages/utils/create';
 const { createDemo, translate } = createComponent('audio');
 import { useTranslate } from '@/sites/assets/util/useTranslate';
-
+import { PlayDoubleBack, PlayDoubleForward, PlayStart, PlayStop, Voice } from '@nutui/icons-vue';
 const initTranslate = () =>
   useTranslate({
     'zh-CN': {
@@ -93,11 +98,20 @@ const initTranslate = () =>
 
 export default createDemo({
   props: {},
+  components: {
+    Voice,
+    PlayDoubleBack,
+    PlayDoubleForward,
+    PlayStart,
+    PlayStop
+  },
   setup() {
     initTranslate();
-    const audioDemo = ref(null);
+    const audioDemo = ref({
+      second: 0
+    });
     const playing = ref(false);
-    const duration = ref(0);
+    const duration = ref<string>('');
     const data = reactive({
       muted: false,
       autoplay: false
@@ -107,11 +121,11 @@ export default createDemo({
       console.log('倒退');
     };
 
-    const forward = (progress) => {
+    const forward = (progress: number) => {
       console.log('快进', '当前时间' + progress);
     };
 
-    const changeStatus = (status) => {
+    const changeStatus = (status: boolean) => {
       console.log('当前播放状态', status);
       playing.value = status;
     };
@@ -120,12 +134,13 @@ export default createDemo({
       console.log('播放结束');
     };
 
-    const changeProgress = (val) => {
+    const changeProgress = (val: number) => {
       console.log('改变进度条', val);
     };
 
     const onCanplay = (e: Event) => {
       duration.value = audioDemo.value.second.toFixed();
+      console.log(e, duration.value);
     };
 
     onMounted(() => {
@@ -172,5 +187,10 @@ export default createDemo({
     border: 1px solid rgba(0, 0, 0, 0.6);
     border-radius: 18px;
   }
+
+  :deep(svg.nut-icon-am-rotate) {
+    --animate-duration: 1s !important;
+    --animate-delay: 0s;
+  }
 }
 </style>

src/packages/__VUE/audio/doc.en-US.md

@@ -51,7 +51,7 @@ export default {
 
 :::demo
 
-```html
+```vue
 <template>
     <nut-audio
       url="//storage.360buyimg.com/jdcdkh/SMB/VCG231024564.wav"
@@ -62,14 +62,18 @@ export default {
       ref="audioDemo"
     >
       <div class="nut-voice">
-        <div><nut-icon name="voice"></nut-icon></div>
+        <div><Voice></Voice></div>
         <div>{{ duration }}"</div>
       </div>
     </nut-audio>
 </template>
 <script lang="ts">
 import { reactive, toRefs, onMounted } from 'vue';
+import { Voice } from '@nutui/icons-vue'
 export default {
+  components: {
+    Voice
+  },
   setup() {
     const audioDemo = ref(null);
     const data = reactive({
@@ -148,7 +152,7 @@ export default {
 
 :::demo
 
-```html
+```vue
 <template>
     <nut-audio
       url="//storage.360buyimg.com/jdcdkh/SMB/VCG231024564.wav"
@@ -163,17 +167,29 @@ export default {
       @changeProgress="changeProgress"
     >
       <div class="nut-audio-operate-group">
-        <nut-audio-operate type="back"><nut-icon name="play-double-back" size="35"></nut-icon></nut-audio-operate>
-        <nut-audio-operate type="play"
-          ><nut-icon :name="!playing ? 'play-start' : 'play-stop'" size="35"></nut-icon
-        ></nut-audio-operate>
-        <nut-audio-operate type="forward"><nut-icon name="play-double-forward" size="35"></nut-icon></nut-audio-operate>
+        <nut-audio-operate type="back">
+          <PlayDoubleBack width="35px" height="35px"></PlayDoubleBack>
+        </nut-audio-operate>
+        <nut-audio-operate type="play">
+          <PlayStart v-if="!playing" width="35px" height="35px"></PlayStart>
+          <PlayStop v-else width="35px" height="35px"></PlayStop>
+        </nut-audio-operate>
+        <nut-audio-operate type="forward">
+          <PlayDoubleForward width="35px" height="35px"></PlayDoubleForward>
+        </nut-audio-operate>
       </div>
     </nut-audio>
 </template>
 <script lang="ts">
 import { reactive, toRefs } from 'vue';
+import { PlayDoubleBack, PlayDoubleForward, PlayStart, PlayStop } from '@nutui/icons-vue'
 export default {
+  components: {
+    PlayDoubleBack,
+    PlayDoubleForward,
+    PlayStart, 
+    PlayStop
+  },
   setup() {
     const data = reactive({
       muted: false,
@@ -182,27 +198,36 @@ export default {
     const playing = ref(false);
 
     const fastBack = () => {
-      console.log('倒退');
+      console.log('Backwards');
     };
 
-    const forward = (progress) => {
-      console.log('快进', '当前时间' + progress);
+    const forward = (progress: number) => {
+      console.log('Fast forward', 'Current Time' + progress);
     };
 
-    const changeStatus = (status) => {
-      console.log('当前播放状态', status);
+    const changeStatus = (status: boolean) => {
+      console.log('Current play status', status);
       playing.value = status;
     };
 
     const ended = () => {
-      console.log('播放结束');
+      console.log('Playing ended');
     };
 
-    const changeProgress = (val) => {
-      console.log('改变进度条', val);
+    const changeProgress = (val: number) => {
+      console.log('Change progress', val);
     };
+
     return {
-      ...toRefs(data),playing, fastBack, forward, changeStatus, audioDemo, ended, duration, changeProgress
+      ...toRefs(data),
+      playing, 
+      fastBack, 
+      forward, 
+      changeStatus, 
+      audioDemo, 
+      ended, 
+      duration, 
+      changeProgress
     };
   }
 };

src/packages/__VUE/audio/doc.md

@@ -51,7 +51,7 @@ export default {
 
 :::demo
 
-```html
+```vue
 <template>
     <nut-audio
       url="//storage.360buyimg.com/jdcdkh/SMB/VCG231024564.wav"
@@ -62,14 +62,18 @@ export default {
       ref="audioDemo"
     >
       <div class="nut-voice">
-        <div><nut-icon name="voice"></nut-icon></div>
+        <div><Voice></Voice></div>
         <div>{{ duration }}"</div>
       </div>
     </nut-audio>
 </template>
 <script lang="ts">
 import { reactive, toRefs, onMounted } from 'vue';
+import { Voice } from '@nutui/icons-vue'
 export default {
+  components: {
+    Voice
+  },
   setup() {
     const audioDemo = ref(null);
     const data = reactive({
@@ -148,7 +152,7 @@ export default {
 
 :::demo
 
-```html
+```vue
 <template>
     <nut-audio
       url="//storage.360buyimg.com/jdcdkh/SMB/VCG231024564.wav"
@@ -163,17 +167,29 @@ export default {
       @changeProgress="changeProgress"
     >
       <div class="nut-audio-operate-group">
-        <nut-audio-operate type="back"><nut-icon name="play-double-back" size="35"></nut-icon></nut-audio-operate>
-        <nut-audio-operate type="play"
-          ><nut-icon :name="!playing ? 'play-start' : 'play-stop'" size="35"></nut-icon
-        ></nut-audio-operate>
-        <nut-audio-operate type="forward"><nut-icon name="play-double-forward" size="35"></nut-icon></nut-audio-operate>
+        <nut-audio-operate type="back">
+          <PlayDoubleBack width="35px" height="35px"></PlayDoubleBack>
+        </nut-audio-operate>
+        <nut-audio-operate type="play">
+          <PlayStart v-if="!playing" width="35px" height="35px"></PlayStart>
+          <PlayStop v-else width="35px" height="35px"></PlayStop>
+        </nut-audio-operate>
+        <nut-audio-operate type="forward">
+          <PlayDoubleForward width="35px" height="35px"></PlayDoubleForward>
+        </nut-audio-operate>
       </div>
     </nut-audio>
 </template>
 <script lang="ts">
 import { reactive, toRefs } from 'vue';
+import { PlayDoubleBack, PlayDoubleForward, PlayStart, PlayStop } from '@nutui/icons-vue'
 export default {
+  components: {
+    PlayDoubleBack,
+    PlayDoubleForward,
+    PlayStart, 
+    PlayStop
+  },
   setup() {
     const data = reactive({
       muted: false,
@@ -185,11 +201,11 @@ export default {
       console.log('倒退');
     };
 
-    const forward = (progress) => {
+    const forward = (progress: number) => {
       console.log('快进', '当前时间' + progress);
     };
 
-    const changeStatus = (status) => {
+    const changeStatus = (status: boolean) => {
       console.log('当前播放状态', status);
       playing.value = status;
     };
@@ -198,11 +214,20 @@ export default {
       console.log('播放结束');
     };
 
-    const changeProgress = (val) => {
+    const changeProgress = (val: number) => {
       console.log('改变进度条', val);
     };
+
     return {
-      ...toRefs(data),playing, fastBack, forward, changeStatus, audioDemo, ended, duration, changeProgress
+      ...toRefs(data),
+      playing, 
+      fastBack, 
+      forward, 
+      changeStatus, 
+      audioDemo, 
+      ended, 
+      duration, 
+      changeProgress
     };
   }
 };

src/packages/__VUE/audio/index.vue

@@ -29,8 +29,8 @@
         :class="['nut-audio__icon--box', playing ? 'nut-audio__icon--play' : 'nut-audio__icon--stop']"
         @click="changeStatus"
       >
-        <nut-icon v-if="playing" name="service" class="nut-icon-am-rotate nut-icon-am-infinite"></nut-icon>
-        <nut-icon v-if="!playing" name="service"></nut-icon>
+        <Service v-if="playing" class="nut-icon-am-rotate nut-icon-am-infinite"></Service>
+        <Service v-else></Service>
       </div>
     </div>
 
@@ -63,6 +63,7 @@
 import { toRefs, ref, onMounted, reactive, watch, provide } from 'vue';
 import { createComponent } from '@/packages/utils/create';
 import Range from '../range/index.vue';
+import { Service } from '@nutui/icons-vue';
 const { componentName, create } = createComponent('audio');
 
 export default create({
@@ -106,7 +107,8 @@ export default create({
     }
   },
   components: {
-    [Range.name]: Range
+    [Range.name]: Range,
+    Service
   },
   emits: ['fastBack', 'play', 'forward', 'ended', 'changeProgress', 'mute', 'can-play'],