pvb3xqpfw
/
YepMusic
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

feat: save lang to localStorage

Browse Source
master
qier222 4 years ago
parent 91fac552e0
commit 281f9fe0bc
5 changed files with 67 additions and 50 deletions
Show Stats Download Patch File Download Diff File

37
src/components/Navbar.vue
Unescape View File

@ -9,18 +9,18 @@
/></button-icon> /></button-icon>
</div> </div>
<div class="navigation-links"> <div class="navigation-links">
<router-link to="/" :class="{ active: this.$route.name === 'home' }" <router-link to="/" :class="{ active: this.$route.name === 'home' }">{{
>{{ $t('nav.home') }}</router-link $t("nav.home")
> }}</router-link>
<router-link <router-link
to="/explore" to="/explore"
:class="{ active: this.$route.name === 'explore' }" :class="{ active: this.$route.name === 'explore' }"
>{{ $t('nav.explore') }}</router-link >{{ $t("nav.explore") }}</router-link
> >
<router-link <router-link
to="/library" to="/library"
:class="{ active: this.$route.name === 'library' }" :class="{ active: this.$route.name === 'library' }"
>{{ $t('nav.library') }}</router-link >{{ $t("nav.library") }}</router-link
> >
</div> </div>
<div class="right-part"> <div class="right-part">
@ -42,8 +42,7 @@
</div> </div>
</div> </div>
<div class="locale-changer" @click="changeLang"> <div class="locale-changer" @click="changeLang">
<svg-icon icon-class="translation" class="translation" <svg-icon icon-class="translation" class="translation" />
/>
</div> </div>
</div> </div>
</nav> </nav>
@ -55,13 +54,13 @@ import ButtonIcon from "@/components/ButtonIcon.vue";
export default { export default {
name: "Navbar", name: "Navbar",
components: { components: {
ButtonIcon, ButtonIcon
}, },
data() { data() {
return { return {
inputFocus: false, inputFocus: false,
keywords: "", keywords: "",
langs: ['zh-CN', 'en'] langs: ["zh-CN", "en"]
}; };
}, },
methods: { methods: {
@ -71,19 +70,27 @@ export default {
}, },
goToSearchPage() { goToSearchPage() {
if (!this.keywords) return; if (!this.keywords) return;
if (this.$route.name === 'search' && this.$route.query.keywords === this.keywords) return; if (
this.$route.name === "search" &&
this.$route.query.keywords === this.keywords
)
return;
this.$router.push({ this.$router.push({
name: "search", name: "search",
query: { keywords: this.keywords }, query: { keywords: this.keywords }
}); });
}, },
changeLang() { changeLang() {
let lang = "";
if (this.$i18n.locale === "zh-CN") { if (this.$i18n.locale === "zh-CN") {
return this.$i18n.locale = "en"; lang = "en";
} else {
lang = "zh-CN";
} }
this.$i18n.locale = "zh-CN"; this.$i18n.locale = lang;
this.$store.commit("changeLang", lang);
} }
}, }
}; };
</script> </script>
@ -215,6 +222,4 @@ nav {
width: 48px; width: 48px;
} }
} }
</style> </style>

3
src/locale/index.js
Unescape View File

@ -1,5 +1,6 @@
import Vue from "vue"; import Vue from "vue";
import VueI18n from "vue-i18n"; import VueI18n from "vue-i18n";
import store from "@/store";
import en from "./lang/en.js"; import en from "./lang/en.js";
import zhCN from "./lang/zh-CN.js"; import zhCN from "./lang/zh-CN.js";
@ -7,7 +8,7 @@ import zhCN from "./lang/zh-CN.js";
Vue.use(VueI18n); Vue.use(VueI18n);
const i18n = new VueI18n({ const i18n = new VueI18n({
locale: "en", locale: store.state.settings.lang,
messages: { messages: {
en, en,
"zh-CN": zhCN "zh-CN": zhCN

17
src/store/index.js
Unescape View File

@ -13,8 +13,7 @@ if (localStorage.getItem("appVersion") === null) {
window.location.reload(); window.location.reload();
} }
Vue.use(Vuex); const saveToLocalStorage = store => {
const saveToLocalStorage = (store) => {
store.subscribe((mutation, state) => { store.subscribe((mutation, state) => {
// console.log(mutation); // console.log(mutation);
localStorage.setItem("player", JSON.stringify(state.player)); localStorage.setItem("player", JSON.stringify(state.player));
@ -22,20 +21,28 @@ const saveToLocalStorage = (store) => {
}); });
}; };
Vue.use(Vuex);
const store = new Vuex.Store({ const store = new Vuex.Store({
state: state, state: state,
mutations, mutations,
actions, actions,
plugins: [saveToLocalStorage], plugins: [saveToLocalStorage]
}); });
store.state.howler = new Howl({ store.state.howler = new Howl({
src: [ src: [
`https://music.163.com/song/media/outer/url?id=${store.state.player.currentTrack.id}`, `https://music.163.com/song/media/outer/url?id=${store.state.player.currentTrack.id}`
], ],
html5: true, html5: true,
format: ["mp3"], format: ["mp3"]
}); });
Howler.volume(store.state.player.volume); Howler.volume(store.state.player.volume);
if ([undefined, null].includes(store.state.settings.lang)) {
let lang = "en";
if (navigator.language.slice(0, 2) === "zh") lang = "zh-CN";
store.state.settings.lang = lang;
localStorage.setItem("settings", JSON.stringify(store.state.settings));
}
export default store; export default store;

37
src/store/initState.js
Unescape View File

@ -1,11 +1,11 @@
const initState = { const initState = {
howler: null, howler: null,
liked: { liked: {
songs: [], songs: []
}, },
contextMenu: { contextMenu: {
clickObjectID: 0, clickObjectID: 0,
showMenu: false, showMenu: false
}, },
player: { player: {
enable: false, enable: false,
@ -26,51 +26,51 @@ const initState = {
"https://p1.music.126.net/kHNNN-VxufjlBtyNPIP3kg==/109951165306614548.jpg", "https://p1.music.126.net/kHNNN-VxufjlBtyNPIP3kg==/109951165306614548.jpg",
tns: [], tns: [],
pic_str: "109951165306614548", pic_str: "109951165306614548",
pic: 109951165306614540, pic: 109951165306614540
}, },
time: 196022, time: 196022,
playable: true, playable: true
}, },
notShuffledList: [], notShuffledList: [],
list: [], list: [],
listInfo: { listInfo: {
type: "", type: "",
id: "", id: ""
}, }
}, },
settings: { settings: {
playlistCategories: [ playlistCategories: [
{ {
name: "全部", name: "全部",
enable: true, enable: true
}, },
{ {
name: "推荐歌单", name: "推荐歌单",
enable: true, enable: true
}, },
{ {
name: "精品歌单", name: "精品歌单",
enable: true, enable: true
}, },
{ {
name: "官方", name: "官方",
enable: true, enable: true
}, },
{ {
name: "流行", name: "流行",
enable: true, enable: true
}, },
{ {
name: "电子", name: "电子",
enable: true, enable: true
}, },
{ {
name: "摇滚", name: "摇滚",
enable: true, enable: true
}, },
{ {
name: "ACG", name: "ACG",
enable: true, enable: true
}, },
// { // {
// name: "最新专辑", // name: "最新专辑",
@ -78,13 +78,14 @@ const initState = {
// }, // },
{ {
name: "排行榜", name: "排行榜",
enable: true, enable: true
}, }
], ],
user: { user: {
id: 0, id: 0
}, },
}, lang: null
}
}; };
export default initState; export default initState;

23
src/store/mutations.js
Unescape View File

@ -13,7 +13,7 @@ export default {
state.howler = new Howl({ state.howler = new Howl({
src: [mp3], src: [mp3],
autoplay: true, autoplay: true,
html5: true, html5: true
}); });
state.howler.play(); state.howler.play();
}, },
@ -28,7 +28,7 @@ export default {
state.player.repeat = status; state.player.repeat = status;
}, },
appendTrackToPlayerList(state, { track, playNext = false }) { appendTrackToPlayerList(state, { track, playNext = false }) {
let existTrack = state.player.list.find((t) => t.id === track.id); let existTrack = state.player.list.find(t => t.id === track.id);
if ( if (
(existTrack === null || existTrack === undefined) && (existTrack === null || existTrack === undefined) &&
playNext === false playNext === false
@ -38,7 +38,7 @@ export default {
} }
// 把track加入到正在播放歌曲的下一首位置 // 把track加入到正在播放歌曲的下一首位置
state.player.list = state.player.list.map((t) => { state.player.list = state.player.list.map(t => {
if (t.sort > state.player.currentTrack.sort) { if (t.sort > state.player.currentTrack.sort) {
t.sort = t.sort + 1; t.sort = t.sort + 1;
} }
@ -54,10 +54,10 @@ export default {
state.player.shuffle = true; state.player.shuffle = true;
let newSorts = shuffleAList( let newSorts = shuffleAList(
state.player.list.filter((t) => t.sort > state.player.currentTrack.sort) state.player.list.filter(t => t.sort > state.player.currentTrack.sort)
); );
state.player.list = state.player.list.map((track) => { state.player.list = state.player.list.map(track => {
if (newSorts[track.id] !== undefined) track.sort = newSorts[track.id]; if (newSorts[track.id] !== undefined) track.sort = newSorts[track.id];
return track; return track;
}); });
@ -68,7 +68,7 @@ export default {
JSON.stringify(state.player.notShuffledList) JSON.stringify(state.player.notShuffledList)
); );
state.player.currentTrack.sort = state.player.list.find( state.player.currentTrack.sort = state.player.list.find(
(t) => t.id === state.player.currentTrack.id t => t.id === state.player.currentTrack.id
).sort; ).sort;
}, },
shuffleTheListBeforePlay(state) { shuffleTheListBeforePlay(state) {
@ -76,7 +76,7 @@ export default {
JSON.stringify(state.player.list) JSON.stringify(state.player.list)
); );
let newSorts = shuffleAList(state.player.list); let newSorts = shuffleAList(state.player.list);
state.player.list = state.player.list.map((track) => { state.player.list = state.player.list.map(track => {
track.sort = newSorts[track.id]; track.sort = newSorts[track.id];
return track; return track;
}); });
@ -91,13 +91,16 @@ export default {
state.liked.songs = trackIDs; state.liked.songs = trackIDs;
}, },
switchSortBetweenTwoTracks(state, { trackID1, trackID2 }) { switchSortBetweenTwoTracks(state, { trackID1, trackID2 }) {
let t1 = state.player.list.find((t) => t.id === trackID1); let t1 = state.player.list.find(t => t.id === trackID1);
let t2 = state.player.list.find((t) => t.id === trackID2); let t2 = state.player.list.find(t => t.id === trackID2);
let sorts = [t1.sort, t2.sort]; let sorts = [t1.sort, t2.sort];
state.player.list = state.player.list.map((t) => { state.player.list = state.player.list.map(t => {
if (t.id === t1.id) t.sort = sorts[1]; if (t.id === t1.id) t.sort = sorts[1];
if (t.id === t2.id) t.sort = sorts[0]; if (t.id === t2.id) t.sort = sorts[0];
return t; return t;
}); });
}, },
changeLang(state, lang) {
state.settings.lang = lang;
}
}; };

Write Preview
Loading…
Cancel
Save