mirror of
https://codeberg.org/Hyperpipe/Hyperpipe
synced 2025-06-27 20:58:01 +02:00
improve country translation & sort them afterwards
This commit is contained in:
parent
51b819f77f
commit
ee673b1b20
8 changed files with 46 additions and 212 deletions
|
@ -1,4 +1,4 @@
|
||||||
<!DOCTYPE html>
|
<!doctype html>
|
||||||
<html lang="en">
|
<html lang="en">
|
||||||
<head>
|
<head>
|
||||||
<meta charset="UTF-8" />
|
<meta charset="UTF-8" />
|
||||||
|
|
|
@ -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 {
|
||||||
|
|
|
@ -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,
|
||||||
|
|
|
@ -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);
|
||||||
|
|
|
@ -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;
|
||||||
}
|
}
|
||||||
|
|
|
@ -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>
|
||||||
|
|
|
@ -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;
|
|
||||||
}
|
|
||||||
};
|
|
||||||
};
|
|
|
@ -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'));
|
||||||
|
|
Loading…
Add table
Add a link
Reference in a new issue