Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

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

Merged
merged 6 commits into from
Dec 16, 2022
Merged

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

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
6 commits
Select commit Hold shift + click to select a range
af50ad0
chore(audio): use icons-vue component
gyt95 Dec 14, 2022
533cb48
refactor(audio): add div to wrap Voice Icon
gyt95 Dec 14, 2022
c633c2c
feat(audio): add height for icons
gyt95 Dec 15, 2022
8eadb59
style: remove useless code
gyt95 Dec 16, 2022
2705e16
chore: undo specified file changes
gyt95 Dec 16, 2022
2bddee1
chore: reset pnpm-lock.yaml
gyt95 Dec 16, 2022
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
3 changes: 0 additions & 3 deletions src/packages/__VUE/audio/__tests__/audio.spec.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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';
Expand All @@ -14,7 +13,6 @@ function sleep(delay = 0): Promise<void> {

beforeAll(() => {
config.global.components = {
NutIcon,
NutRange,
AudioOperate,
NutButton
Expand All @@ -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
Expand Down
44 changes: 32 additions & 12 deletions src/packages/__VUE/audio/demo.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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>
Expand Down Expand Up @@ -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>
Expand All @@ -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': {
Expand All @@ -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
Expand All @@ -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;
};
Expand All @@ -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(() => {
Expand Down Expand Up @@ -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>
59 changes: 42 additions & 17 deletions src/packages/__VUE/audio/doc.en-US.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -51,7 +51,7 @@ export default {

:::demo

```html
```vue
<template>
<nut-audio
url="//storage.360buyimg.com/jdcdkh/SMB/VCG231024564.wav"
Expand All @@ -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({
Expand Down Expand Up @@ -148,7 +152,7 @@ export default {

:::demo

```html
```vue
<template>
<nut-audio
url="//storage.360buyimg.com/jdcdkh/SMB/VCG231024564.wav"
Expand All @@ -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,
Expand All @@ -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
};
}
};
Expand Down
49 changes: 37 additions & 12 deletions src/packages/__VUE/audio/doc.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -51,7 +51,7 @@ export default {

:::demo

```html
```vue
<template>
<nut-audio
url="//storage.360buyimg.com/jdcdkh/SMB/VCG231024564.wav"
Expand All @@ -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({
Expand Down Expand Up @@ -148,7 +152,7 @@ export default {

:::demo

```html
```vue
<template>
<nut-audio
url="//storage.360buyimg.com/jdcdkh/SMB/VCG231024564.wav"
Expand All @@ -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,
Expand All @@ -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;
};
Expand All @@ -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
};
}
};
Expand Down
8 changes: 5 additions & 3 deletions src/packages/__VUE/audio/index.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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>

Expand Down Expand Up @@ -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({
Expand Down Expand Up @@ -106,7 +107,8 @@ export default create({
}
},
components: {
[Range.name]: Range
[Range.name]: Range,
Service
},
emits: ['fastBack', 'play', 'forward', 'ended', 'changeProgress', 'mute', 'can-play'],

Expand Down