Skip to content

Commit

Permalink
renderer: Favorite: extract common parts as mixin
Browse files Browse the repository at this point in the history
  • Loading branch information
@rocka
rocka committed Mar 2, 2020
1 parent 6c5e9a9 commit d554837
Show file tree
Hide file tree
Showing 6 changed files with 107 additions and 117 deletions.
30 changes: 12 additions & 18 deletions src/renderer/page/Favorite/FavAlbums.vue
View file
Original file line number Diff line number Diff line change
Expand Up @@ -15,25 +15,28 @@
</AvatarListItem>
</mu-list>
</template>
<AlbumDetail :album="album"></AlbumDetail>
<AlbumDetail v-if="album"
:album="album"></AlbumDetail>
</ListDetailLayout>
</template>

<script>
import { mapActions, mapState } from 'vuex';
import { getAlbumDetail } from '@/api/typed';
import { SET_LOGIN_VALID } from '@/store/mutation-types';
import AlbumDetail from '@/components/AlbumDetail.vue';
import AvatarListItem from '@/components/AvatarListItem.vue';
import ListDetailLayout from '@/components/ListDetailLayout.vue';
import { FetchOnLoginMixin } from './fetch-on-login';
export default {
mixins: [FetchOnLoginMixin],
data() {
return {
album: null,
listLoading: true,
detailLoading: true
listLoading: false,
detailLoading: false
};
},
computed: {
Expand All @@ -49,9 +52,11 @@ export default {
this.detailLoading = false;
},
async fetchData() {
this.listLoading = true;
await this.updateUserAlbums();
this.listLoading = false;
if (this.user.albums.length <= 0) {
this.listLoading = true;
await this.updateUserAlbums();
this.listLoading = false;
}
const al = this.user.albums[0];
if (al && al.id) {
this.loadAlbum(al.id);
Expand All @@ -61,17 +66,6 @@ export default {
this.loadAlbum(id);
}
},
mounted() {
if (this.user.loginValid) {
this.fetchData();
} else {
this.$store.subscribe(({ type, payload }) => {
if (type === SET_LOGIN_VALID && payload === true) {
this.fetchData();
}
});
}
},
components: {
AlbumDetail,
AvatarListItem,
Expand Down
30 changes: 12 additions & 18 deletions src/renderer/page/Favorite/FavArtists.vue
View file
Original file line number Diff line number Diff line change
Expand Up @@ -15,28 +15,31 @@
</AvatarListItem>
</mu-list>
</template>
<ArtistDetail :artist="artist"></ArtistDetail>
<ArtistDetail v-if="artist.detail"
:artist="artist"></ArtistDetail>
</ListDetailLayout>
</template>

<script>
import { mapActions, mapState } from 'vuex';
import { getArtistDetail } from '@/api/typed';
import { SET_LOGIN_VALID } from '@/store/mutation-types';
import ArtistDetail from '@/components/ArtistDetail/ArtistDetail.vue';
import AvatarListItem from '@/components/AvatarListItem.vue';
import ListDetailLayout from '@/components/ListDetailLayout.vue';
import { FetchOnLoginMixin } from './fetch-on-login';
export default {
mixins: [FetchOnLoginMixin],
data() {
return {
artist: {
detail: null,
hotSongs: []
},
listLoading: true,
detailLoading: true
listLoading: false,
detailLoading: false
};
},
computed: {
Expand All @@ -52,9 +55,11 @@ export default {
this.detailLoading = false;
},
async fetchData() {
this.listLoading = true;
await this.updateUserArtists();
this.listLoading = false;
if (this.user.artists.length <= 0) {
this.listLoading = true;
await this.updateUserArtists();
this.listLoading = false;
}
const ar = this.user.artists[0];
if (ar && ar.id) {
this.loadArtist(ar.id);
Expand All @@ -64,17 +69,6 @@ export default {
this.loadArtist(id);
}
},
mounted() {
if (this.user.loginValid) {
this.fetchData();
} else {
this.$store.subscribe(({ type, payload }) => {
if (type === SET_LOGIN_VALID && payload === true) {
this.fetchData();
}
});
}
},
components: {
ArtistDetail,
AvatarListItem,
Expand Down
31 changes: 13 additions & 18 deletions src/renderer/page/Favorite/FavDjRadios.vue
View file
Original file line number Diff line number Diff line change
Expand Up @@ -15,25 +15,29 @@
</AvatarListItem>
</mu-list>
</template>
<DjRadioDetail :djradio="djradio"></DjRadioDetail>
<DjRadioDetail v-if="djradio"
:djradio="djradio"></DjRadioDetail>
</ListDetailLayout>
</template>

<script>
import { mapActions, mapState } from 'vuex';
import Api from '@/api/ipc';
import { SET_LOGIN_VALID } from '@/store/mutation-types';
import DjRadioDetail from '@/components/DjRadioDetail/DjRadioDetail.vue';
import AvatarListItem from '@/components/AvatarListItem.vue';
import ListDetailLayout from '@/components/ListDetailLayout.vue';
import { FetchOnLoginMixin } from './fetch-on-login';
export default {
mixins: [FetchOnLoginMixin],
data() {
return {
djradio: null,
listLoading: true,
detailLoading: true
listLoading: false,
detailLoading: false
};
},
computed: {
Expand All @@ -50,9 +54,11 @@ export default {
this.detailLoading = false;
},
async fetchData() {
this.listLoading = true;
await this.updateUserRadios();
this.listLoading = false;
if (this.user.djradios.length <= 0) {
this.listLoading = true;
await this.updateUserRadios();
this.listLoading = false;
}
const r = this.user.djradios[0];
if (r && r.id) {
this.loadDjRadio(r.id);
Expand All @@ -62,17 +68,6 @@ export default {
this.loadDjRadio(id);
}
},
mounted() {
if (this.user.loginValid) {
this.fetchData();
} else {
this.$store.subscribe(({ type, payload }) => {
if (type === SET_LOGIN_VALID && payload === true) {
this.fetchData();
}
});
}
},
components: {
DjRadioDetail,
AvatarListItem,
Expand Down
86 changes: 39 additions & 47 deletions src/renderer/page/Favorite/FavPlaylists.vue
View file
Original file line number Diff line number Diff line change
Expand Up @@ -5,44 +5,42 @@
tipText="登录后查看收藏的歌单"
:showTip="!user.loginValid">
<template #list>
<mu-load-more @refresh="handleListRefresh"
:refreshing="listRefreshing">
<mu-list toggle-nested
:nested-indent="false">
<mu-list-item v-for="group in listGroups"
button
nested
:key="group.name"
:open="group.open"
@click="group.open = !group.open">
<mu-list-item-title>{{group.name}}</mu-list-item-title>
<mu-list-item-action>
<mu-icon class="toggle-icon"
size="24"
value="keyboard_arrow_down"></mu-icon>
</mu-list-item-action>
<template #nested>
<AvatarListItem v-for="(list, index) in group.lists"
:key="index"
@click="handleClick(list.id)"
:img="list.coverImgUrl"
:title="list.name"
:subTitle="`共 ${list.trackCount} 首`"></AvatarListItem>
</template>
</mu-list-item>
</mu-list>
</mu-load-more>
<mu-list toggle-nested
:nested-indent="false">
<mu-list-item v-for="group in listGroups"
button
nested
:key="group.name"
:open="group.open"
@click="group.open = !group.open">
<mu-list-item-title>{{group.name}}</mu-list-item-title>
<mu-list-item-action>
<mu-icon class="toggle-icon"
size="24"
value="keyboard_arrow_down"></mu-icon>
</mu-list-item-action>
<template #nested>
<AvatarListItem v-for="(list, index) in group.lists"
:key="index"
@click="loadPlaylist(list.id)"
:img="list.coverImgUrl"
:title="list.name"
:subTitle="`共 ${list.trackCount} 首`"></AvatarListItem>
</template>
</mu-list-item>
</mu-list>
</template>
<PlaylistDetail v-if="playlist"
:playlist="playlist"></PlaylistDetail>
</ListDetailLayout>
</template>

<script>
import { mapActions, mapState } from 'vuex';
import { getPlaylistDetail } from '@/api/typed';
import { mapState } from 'vuex';
import { getPlaylistDetail } from '@/api/typed';
import { SET_USER_PLAYLISTS } from '@/store/mutation-types';
import ListDetailLayout from '@/components/ListDetailLayout.vue';
import AvatarListItem from '@/components/AvatarListItem.vue';
import PlaylistDetail from '@/components/PlaylistDetail.vue';
Expand All @@ -51,8 +49,7 @@ export default {
data() {
return {
playlist: null,
detailLoading: false,
listRefreshing: false
detailLoading: false
};
},
computed: {
Expand All @@ -74,36 +71,31 @@ export default {
}
},
methods: {
...mapActions([
'updateUserPlaylist'
]),
async handleListRefresh() {
this.listRefreshing = true;
await this.updateUserPlaylist();
this.listRefreshing = false;
},
async loadPlaylist(id) {
this.detailLoading = true;
this.playlist = await getPlaylistDetail(id);
this.detailLoading = false;
},
handleClick(id) {
this.loadPlaylist(id);
async fetchData() {
this.loadPlaylist(this.user.playlist[0].id);
}
},
mounted() {
created() {
if (this.user.loginValid && this.user.playlist.length > 0) {
this.loadPlaylist(this.user.playlist[0].id);
this.fetchData();
} else {
this.$store.subscribe((mutation) => {
this.unsub = this.$store.subscribe((mutation) => {
if (mutation.type === SET_USER_PLAYLISTS) {
if (this.$route.name === 'favorite') {
this.loadPlaylist(this.user.playlist[0].id);
}
this.fetchData();
}
});
}
},
beforeDestroy() {
if (this.unsub) {
this.unsub();
}
},
components: {
ListDetailLayout,
AvatarListItem,
Expand Down
27 changes: 11 additions & 16 deletions src/renderer/page/Favorite/FavVideos.vue
View file
Original file line number Diff line number Diff line change
Expand Up @@ -15,25 +15,27 @@
</AvatarListItem>
</mu-list>
</template>
<VideoDetail :video="video"></VideoDetail>
<VideoDetail v-if="video" :video="video"></VideoDetail>
</ListDetailLayout>
</template>

<script>
import { mapActions, mapState } from 'vuex';
import { getVideoDetail } from '@/api/typed';
import { SET_LOGIN_VALID } from '@/store/mutation-types';
import VideoDetail from '@/components/VideoDetail/VideoDetail.vue';
import AvatarListItem from '@/components/AvatarListItem.vue';
import ListDetailLayout from '@/components/ListDetailLayout.vue';
import { FetchOnLoginMixin } from './fetch-on-login';
export default {
mixins: [FetchOnLoginMixin],
data() {
return {
video: null,
listLoading: true,
detailLoading: true,
listLoading: false,
detailLoading: false,
pausedWhenEnter: null
};
},
Expand All @@ -60,9 +62,11 @@ export default {
});
},
async fetchData() {
this.listLoading = true;
await this.updateUserVideos();
this.listLoading = false;
if (this.user.videos.length <= 0) {
this.listLoading = true;
await this.updateUserVideos();
this.listLoading = false;
}
const v = this.user.videos[0];
if (v && v.id) {
this.loadVideo(v.id, v.type);
Expand All @@ -74,15 +78,6 @@ export default {
},
mounted() {
this.pausedWhenEnter = this.ui.paused;
if (this.user.loginValid) {
this.fetchData();
} else {
this.$store.subscribe(({ type, payload }) => {
if (type === SET_LOGIN_VALID && payload === true) {
this.fetchData();
}
});
}
},
activated() {
this.pausedWhenEnter = this.ui.paused;
Expand Down
Loading

0 comments on commit d554837

Please sign in to comment.