improve country translation & sort them afterwards

This commit is contained in:
vrifox 2023-07-19 10:22:13 +02:00 committed by Shiny Nematoda
parent 51b819f77f
commit ee673b1b20
8 changed files with 46 additions and 212 deletions

View file

@ -1,4 +1,4 @@
<!DOCTYPE html> <!doctype html>
<html lang="en"> <html lang="en">
<head> <head>
<meta charset="UTF-8" /> <meta charset="UTF-8" />

View file

@ -117,10 +117,22 @@ body {
min-height: 100vh; min-height: 100vh;
color: var(--color-text); color: var(--color-text);
background: var(--color-background); background: var(--color-background);
transition: color 0.5s, background-color 0.5s; transition:
color 0.5s,
background-color 0.5s;
line-height: 1.6; line-height: 1.6;
font-family: Inter, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, font-family:
Oxygen, Ubuntu, Cantarell, 'Fira Sans', 'Droid Sans', 'Helvetica Neue', Inter,
-apple-system,
BlinkMacSystemFont,
'Segoe UI',
Roboto,
Oxygen,
Ubuntu,
Cantarell,
'Fira Sans',
'Droid Sans',
'Helvetica Neue',
sans-serif; sans-serif;
font-size: 15px; font-size: 15px;
text-rendering: optimizeLegibility; text-rendering: optimizeLegibility;
@ -249,7 +261,9 @@ input[type='search']::-webkit-search-cancel-button:hover {
} }
.bi.clickable::before { .bi.clickable::before {
border-radius: 50%; border-radius: 50%;
transition: background-color 0.1s ease, box-shadow 0.1s ease; transition:
background-color 0.1s ease,
box-shadow 0.1s ease;
} }
.bi.clickable:active::before { .bi.clickable:active::before {
@ -286,7 +300,10 @@ img {
.pop, .pop,
.pop-2 { .pop-2 {
transition: background-color 0.4s ease, box-shadow 0.4s ease, color 0.3s ease, transition:
background-color 0.4s ease,
box-shadow 0.4s ease,
color 0.3s ease,
transform 0.4s ease; transform 0.4s ease;
} }
.pop { .pop {

View file

@ -3,7 +3,7 @@ import { useRand } from '@/scripts/colors.js';
import { useI18n } from '@/stores/misc.js'; import { useI18n } from '@/stores/misc.js';
const rand = useRand(), const rand = useRand(),
{ t } = useI18n(); { t } = useI18n();
defineProps({ defineProps({
name: String, name: String,

View file

@ -44,7 +44,12 @@ function Sub() {
@click=" @click="
results.getAlbum('/playlist?list=' + artist.state.playlistId) results.getAlbum('/playlist?list=' + artist.state.playlistId)
" /> " />
<span class="us-box subs" :data-active="isSub" :data-subs-l="t('artist.subscribers')" :data-subs="t('artist.subs')" @click="Sub"> <span
class="us-box subs"
:data-active="isSub"
:data-subs-l="t('artist.subscribers')"
:data-subs="t('artist.subs')"
@click="Sub">
{{ artist.state.subscriberCount || 0 }} {{ artist.state.subscriberCount || 0 }}
</span> </span>
</div> </div>
@ -105,7 +110,9 @@ p.more {
box-shadow: 0 0 1rem var(--color-background-mute); box-shadow: 0 0 1rem var(--color-background-mute);
} }
.subs { .subs {
transition: background-color 0.4s ease, color 0.4s ease; transition:
background-color 0.4s ease,
color 0.4s ease;
} }
.subs::after { .subs::after {
content: ' ' attr(data-subs-l); content: ' ' attr(data-subs-l);

View file

@ -4,7 +4,6 @@ import { ref, reactive, watch, onMounted } from 'vue';
import AlbumItem from '@/components/AlbumItem.vue'; import AlbumItem from '@/components/AlbumItem.vue';
import SongItem from '@/components/SongItem.vue'; import SongItem from '@/components/SongItem.vue';
import { translateCountryNames } from '@/scripts/countries.js';
import { getJsonHyp } from '@/scripts/fetch.js'; import { getJsonHyp } from '@/scripts/fetch.js';
import { useResults, useArtist } from '@/stores/results.js'; import { useResults, useArtist } from '@/stores/results.js';
@ -33,10 +32,17 @@ async function getCharts() {
if (!id.value) if (!id.value)
id.value = json.options.all.find(i => i.title == json.options.default).id; id.value = json.options.all.find(i => i.title == json.options.default).id;
translateCountryNames(json.options.all); for (const country of json.options.all) {
console.log(json.options.all) const countryLocaleId = `countries.${country.id}`;
data.options = json.options.all; if (t(countryLocaleId) !== countryLocaleId) {
country.title = t(countryLocaleId);
}
}
data.options = json.options.all.sort((a, b) => {
return a.title.localeCompare(b.title);
});
data.songs = json.trending; data.songs = json.trending;
data.artists = json.artists; data.artists = json.artists;
} }

View file

@ -480,8 +480,8 @@ onMounted(async () => {
<a <a
href="https://piped.video/register" href="https://piped.video/register"
target="_blank" target="_blank"
rel="noreferrer noopener" rel="noreferrer noopener">
> Piped</a Piped</a
> >
</p> </p>
</form> </form>

View file

@ -1,196 +0,0 @@
import { useI18n } from '@/stores/misc.js';
const { t } = useI18n();
export function translateCountryNames(countries) {
for (const country of countries) {
switch (country.id) {
case "AE":
country.title = t('countries.AE');
break;
case "AR":
country.title = t('countries.AR');
break;
case "AT":
country.title = t('countries.AT');
break;
case "AU":
country.title = t('countries.AU');
break;
case "BE":
country.title = t('countries.BE');
break;
case "BO":
country.title = t('countries.BO');
break;
case "BR":
country.title = t('countries.BR');
break;
case "CA":
country.title = t('countries.CA');
break;
case "CH":
country.title = t('countries.CH');
break;
case "CL":
country.title = t('countries.CL');
break;
case "CO":
country.title = t('countries.CO');
break;
case "CR":
country.title = t('countries.CR');
break;
case "CZ":
country.title = t('countries.CZ');
break;
case "DE":
country.title = t('countries.DE');
break;
case "DK":
country.title = t('countries.DK');;
break;
case "DO":
country.title = t('countries.DO');
break;
case "EC":
country.title = t('countries.EC');
break;
case "EE":
country.title = t('countries.EE');
break;
case "EG":
country.title = t('countries.EG');
break;
case "ES":
country.title = t('countries.ES');
break;
case "FI":
country.title = t('countries.FI');
break;
case "FR":
country.title = t('countries.FR');
break;
case "GB":
country.title = t('countries.GB');
break;
case "GT":
country.title = t('countries.GT');
break;
case "HN":
country.title = t('countries.HN');
break;
case "HU":
country.title = t('countries.HU');
break;
case "ID":
country.title = t('countries.ID');
break;
case "IE":
country.title = t('countries.IE');
break;
case "IL":
country.title = t('countries.IL');
break;
case "IN":
country.title = t('countries.IN');
break;
case "IS":
country.title = t('countries.IS');
break;
case "IT":
country.title = t('countries.IT');
break;
case "JP":
country.title = t('countries.JP');
break;
case "KE":
country.title = t('countries.KE');
break;
case "KR":
country.title = t('countries.KR');
break;
case "LU":
country.title = t('countries.LU');
break;
case "MX":
country.title = t('countries.MX');
break;
case "NG":
country.title = t('countries.NG');
break;
case "NI":
country.title = t('countries.NI');
break;
case "NL":
country.title = t('countries.NL');
break;
case "NO":
country.title = t('countries.NO');
break;
case "NZ":
country.title = t('countries.NZ');
break;
case "PA":
country.title = t('countries.PA');
break;
case "PE":
country.title = t('countries.PE');
break;
case "PL":
country.title = t('countries.PL');
break;
case "PT":
country.title = t('countries.PT');
break;
case "PY":
country.title = t('countries.PY');
break;
case "RO":
country.title = t('countries.RO');
break;
case "RS":
country.title = t('countries.RS');
break;
case "RU":
country.title = t('countries.RU');
break;
case "SA":
country.title = t('countries.SA');
break;
case "SE":
country.title = t('countries.SE');
break;
case "SV":
country.title = t('countries.SV');
break;
case "TR":
country.title = t('countries.TR');
break;
case "TZ":
country.title = t('countries.TZ');
break;
case "UA":
country.title = t('countries.UA');
break;
case "UG":
country.title = t('countries.UG');
break;
case "US":
country.title = t('countries.US');
break;
case "UY":
country.title = t('countries.UY');
break;
case "ZA":
country.title = t('countries.ZA');
break;
case "ZW":
country.title = t('countries.ZW');
break;
case "ZZ":
country.title = t('countries.ZZ');
break;
}
};
};

View file

@ -48,7 +48,7 @@ export function useShare(data) {
console.err(err); console.err(err);
}); });
} else { } else {
const { t } = useI18n() const { t } = useI18n();
navigator.clipboard.writeText(data.url).then( navigator.clipboard.writeText(data.url).then(
() => { () => {
alert(t('info.copied_to_clipboard')); alert(t('info.copied_to_clipboard'));